From 2b11ff9a07ce32af418e42c571d76aed7bd027c0 Mon Sep 17 00:00:00 2001 From: s-alves10 Date: Thu, 7 Sep 2023 03:02:51 -0500 Subject: [PATCH 1/4] fix: long press on emoji doesn't show highlight in mobile --- src/components/EmojiPicker/EmojiPickerMenuItem/index.js | 3 ++- .../Pressable/GenericPressable/BaseGenericPressable.js | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/EmojiPicker/EmojiPickerMenuItem/index.js b/src/components/EmojiPicker/EmojiPickerMenuItem/index.js index 728e56792ddb..b51a8b07537c 100644 --- a/src/components/EmojiPicker/EmojiPickerMenuItem/index.js +++ b/src/components/EmojiPicker/EmojiPickerMenuItem/index.js @@ -72,15 +72,16 @@ class EmojiPickerMenuItem extends PureComponent { 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 index 0c5b75b1bb13..347c171d4861 100644 --- a/src/components/Pressable/GenericPressable/BaseGenericPressable.js +++ b/src/components/Pressable/GenericPressable/BaseGenericPressable.js @@ -133,7 +133,8 @@ const GenericPressable = forwardRef((props, ref) => { 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 : () => {}} onKeyPress={!isDisabled ? onKeyPressHandler : undefined} onKeyDown={!isDisabled ? onKeyDown : undefined} onPressIn={!isDisabled ? onPressIn : undefined} From a0025c32f449a7e8eb0707c8bad5afb3b9eea83a Mon Sep 17 00:00:00 2001 From: s-alves10 Date: Thu, 7 Sep 2023 12:58:28 -0500 Subject: [PATCH 2/4] fix: disable selection by long-press --- src/styles/styles.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/styles.js b/src/styles/styles.js index 040c9cb8d910..e98c97f49a4e 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1782,6 +1782,7 @@ const styles = { paddingTop: 2, paddingBottom: 2, height: CONST.EMOJI_PICKER_ITEM_HEIGHT, + ...userSelect.userSelectNone, }, emojiItemHighlighted: { From 4ddeff962a13613e2d8cda834579038c15b5d67c Mon Sep 17 00:00:00 2001 From: s-alves10 Date: Sun, 10 Sep 2023 19:10:08 -0500 Subject: [PATCH 3/4] fix: default long-press handler only for mobile browsers --- .../Pressable/GenericPressable/BaseGenericPressable.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/Pressable/GenericPressable/BaseGenericPressable.js b/src/components/Pressable/GenericPressable/BaseGenericPressable.js index 347c171d4861..6285aab50729 100644 --- 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,6 +128,7 @@ const GenericPressable = forwardRef((props, ref) => { return KeyboardShortcut.subscribe(shortcutKey, onPressHandler, descriptionKey, modifiers, true, false, 0, false); }, [keyboardShortcut, onPressHandler]); + const defaultLongPressHandler = Browser.isMobile() ? () => {} : undefined return ( { ref={ref} onPress={!isDisabled ? onPressHandler : 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 : () => {}} + onLongPress={!isDisabled && onLongPress ? onLongPressHandler : defaultLongPressHandler} onKeyPress={!isDisabled ? onKeyPressHandler : undefined} onKeyDown={!isDisabled ? onKeyDown : undefined} onPressIn={!isDisabled ? onPressIn : undefined} From 4370f6fdfdf696d7aeeae12e3c0c86689158b911 Mon Sep 17 00:00:00 2001 From: s-alves10 Date: Sun, 10 Sep 2023 21:29:25 -0500 Subject: [PATCH 4/4] fix: change default long-press handler only on mobile chrome --- .../Pressable/GenericPressable/BaseGenericPressable.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Pressable/GenericPressable/BaseGenericPressable.js b/src/components/Pressable/GenericPressable/BaseGenericPressable.js index 6285aab50729..9bb221b2de1e 100644 --- a/src/components/Pressable/GenericPressable/BaseGenericPressable.js +++ b/src/components/Pressable/GenericPressable/BaseGenericPressable.js @@ -128,7 +128,7 @@ const GenericPressable = forwardRef((props, ref) => { return KeyboardShortcut.subscribe(shortcutKey, onPressHandler, descriptionKey, modifiers, true, false, 0, false); }, [keyboardShortcut, onPressHandler]); - const defaultLongPressHandler = Browser.isMobile() ? () => {} : undefined + const defaultLongPressHandler = Browser.isMobileChrome() ? () => {} : undefined; return (