Merge pull request Expensify#26931 from s-alves10/fix/issue-24654

fix: long press on emoji doesn't show highlight in mobile
mananjadhav · Sep 15, 2023 · 76c1559 · 76c1559
2 parents 048850b + 4370f6f
commit 76c1559
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 2 deletions.
diff --git a/src/components/EmojiPicker/EmojiPickerMenuItem/index.js b/src/components/EmojiPicker/EmojiPickerMenuItem/index.js
@@ -72,15 +72,16 @@ class EmojiPickerMenuItem extends PureComponent {
             <PressableWithoutFeedback
                 shouldUseAutoHitSlop={false}
                 onPress={() => this.props.onPress(this.props.emoji)}
+                onPressOut={Browser.isMobile() ? this.props.onHoverOut : undefined}
                 onHoverIn={this.props.onHoverIn}
                 onHoverOut={this.props.onHoverOut}
                 onFocus={this.props.onFocus}
                 onBlur={this.props.onBlur}
                 ref={(ref) => (this.ref = ref)}
                 style={({pressed}) => [
-                    Browser.isMobile() && StyleUtils.getButtonBackgroundColorStyle(getButtonState(false, pressed)),
                     this.props.isHighlighted && this.props.isUsingKeyboardMovement ? styles.emojiItemKeyboardHighlighted : {},
                     this.props.isHighlighted && !this.props.isUsingKeyboardMovement ? styles.emojiItemHighlighted : {},
+                    Browser.isMobile() && StyleUtils.getButtonBackgroundColorStyle(getButtonState(false, pressed)),
                     styles.emojiItem,
                 ]}
                 accessibilityLabel={this.props.emoji}

diff --git a/src/components/Pressable/GenericPressable/BaseGenericPressable.js b/src/components/Pressable/GenericPressable/BaseGenericPressable.js
@@ -5,6 +5,7 @@ import _ from 'underscore';
 import Accessibility from '../../../libs/Accessibility';
 import HapticFeedback from '../../../libs/HapticFeedback';
 import KeyboardShortcut from '../../../libs/KeyboardShortcut';
+import * as Browser from '../../../libs/Browser';
 import styles from '../../../styles/styles';
 import genericPressablePropTypes from './PropTypes';
 import CONST from '../../../CONST';
@@ -127,13 +128,15 @@ const GenericPressable = forwardRef((props, ref) => {
         return KeyboardShortcut.subscribe(shortcutKey, onPressHandler, descriptionKey, modifiers, true, false, 0, false);
     }, [keyboardShortcut, onPressHandler]);
 
+    const defaultLongPressHandler = Browser.isMobileChrome() ? () => {} : undefined;
     return (
         <Pressable
             hitSlop={shouldUseAutoHitSlop ? hitSlop : undefined}
             onLayout={shouldUseAutoHitSlop ? onLayout : undefined}
             ref={ref}
             onPress={!isDisabled ? onPressHandler : undefined}
-            onLongPress={!isDisabled && onLongPress ? onLongPressHandler : undefined}
+            // In order to prevent haptic feedback, pass empty callback as onLongPress props. Please refer https://github.com/necolas/react-native-web/issues/2349#issuecomment-1195564240
+            onLongPress={!isDisabled && onLongPress ? onLongPressHandler : defaultLongPressHandler}
             onKeyPress={!isDisabled ? onKeyPressHandler : undefined}
             onKeyDown={!isDisabled ? onKeyDown : undefined}
             onPressIn={!isDisabled ? onPressIn : undefined}

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -1810,6 +1810,7 @@ const styles = (theme) => ({
         paddingTop: 2,
         paddingBottom: 2,
         height: CONST.EMOJI_PICKER_ITEM_HEIGHT,
+        ...userSelect.userSelectNone,
     },
 
     emojiItemHighlighted: {