diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js index 27fd199a3895..444f0c58b914 100755 --- a/src/components/EmojiPicker/EmojiPickerMenu/index.js +++ b/src/components/EmojiPicker/EmojiPickerMenu/index.js @@ -21,6 +21,7 @@ import * as EmojiUtils from '../../../libs/EmojiUtils'; import CategoryShortcutBar from '../CategoryShortcutBar'; import TextInput from '../../TextInput'; import isEnterWhileComposition from '../../../libs/KeyboardShortcut/isEnterWhileComposition'; +import canFocusInputOnScreenFocus from '../../../libs/canFocusInputOnScreenFocus'; const propTypes = { /** Function to add the selected emoji to the main compose text input */ @@ -58,6 +59,10 @@ class EmojiPickerMenu extends Component { // Ref for emoji FlatList this.emojiList = undefined; + // We want consistent auto focus behavior on input between native and mWeb so we have some auto focus management code that will + // prevent auto focus when open picker for mobile device + this.shouldFocusInputOnScreenFocus = canFocusInputOnScreenFocus(); + this.filterEmojis = _.debounce(this.filterEmojis.bind(this), 300); this.highlightAdjacentEmoji = this.highlightAdjacentEmoji.bind(this); this.setupEventHandlers = this.setupEventHandlers.bind(this); @@ -96,7 +101,7 @@ class EmojiPickerMenu extends Component { // get a ref to the inner textInput element e.g. if we do // this.textInput = el} /> this will not // return a ref to the component, but rather the HTML element by default - if (this.props.forwardedRef && _.isFunction(this.props.forwardedRef)) { + if (this.shouldFocusInputOnScreenFocus && this.props.forwardedRef && _.isFunction(this.props.forwardedRef)) { this.props.forwardedRef(this.searchInput); } this.setupEventHandlers(); @@ -504,6 +509,7 @@ class EmojiPickerMenu extends Component { onChangeText={this.filterEmojis} defaultValue="" ref={(el) => (this.searchInput = el)} + autoFocus={this.shouldFocusInputOnScreenFocus} selectTextOnFocus={this.state.selectTextOnFocus} onSelectionChange={this.onSelectionChange} onFocus={() => this.setState({isFocused: true, highlightedIndex: -1, isUsingKeyboardMovement: false})} diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.native.js b/src/components/EmojiPicker/EmojiPickerMenu/index.native.js index 5cd956dae56b..bfdaf1c13d1b 100644 --- a/src/components/EmojiPicker/EmojiPickerMenu/index.native.js +++ b/src/components/EmojiPicker/EmojiPickerMenu/index.native.js @@ -25,9 +25,6 @@ const propTypes = { /** Function to add the selected emoji to the main compose text input */ onEmojiSelected: PropTypes.func.isRequired, - /** The ref to the search input (may be null on small screen widths) */ - forwardedRef: PropTypes.func, - /** Stores user's preferred skin tone */ preferredSkinTone: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), @@ -40,12 +37,11 @@ const propTypes = { }; const defaultProps = { - forwardedRef: () => {}, preferredSkinTone: CONST.EMOJI_DEFAULT_SKIN_TONE, frequentlyUsedEmojis: [], }; -function EmojiPickerMenu({preferredLocale, onEmojiSelected, preferredSkinTone, translate, frequentlyUsedEmojis, forwardedRef}) { +function EmojiPickerMenu({preferredLocale, onEmojiSelected, preferredSkinTone, translate, frequentlyUsedEmojis}) { const emojiList = useAnimatedRef(); // eslint-disable-next-line react-hooks/exhaustive-deps const allEmojis = useMemo(() => EmojiUtils.mergeEmojisWithFrequentlyUsedEmojis(emojis), [frequentlyUsedEmojis]); @@ -172,7 +168,6 @@ function EmojiPickerMenu({preferredLocale, onEmojiSelected, preferredSkinTone, t accessibilityLabel={translate('common.search')} accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT} onChangeText={filterEmojis} - ref={forwardedRef} /> {!isFiltered && (