Skip to content

Commit

Permalink
Merge pull request #26931 from s-alves10/fix/issue-24654
Browse files Browse the repository at this point in the history
fix: long press on emoji doesn't show highlight in mobile
  • Loading branch information
bondydaa authored Sep 15, 2023
2 parents 048850b + 4370f6f commit 76c1559
Show file tree
Hide file tree
Showing 3 changed files with 7 additions and 2 deletions.
3 changes: 2 additions & 1 deletion src/components/EmojiPicker/EmojiPickerMenuItem/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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}
Expand Down
1 change: 1 addition & 0 deletions src/styles/styles.js
Original file line number Diff line number Diff line change
Expand Up @@ -1810,6 +1810,7 @@ const styles = (theme) => ({
paddingTop: 2,
paddingBottom: 2,
height: CONST.EMOJI_PICKER_ITEM_HEIGHT,
...userSelect.userSelectNone,
},

emojiItemHighlighted: {
Expand Down

0 comments on commit 76c1559

Please sign in to comment.