From 16acf57e2f840b5155392e9eea9a4122d9ace153 Mon Sep 17 00:00:00 2001 From: situchan Date: Wed, 12 Jul 2023 08:33:32 +0100 Subject: [PATCH] prevent mWeb autofocus on emoji picker --- src/components/EmojiPicker/EmojiPickerMenu/index.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js index b41fd1780d1f..fc1bc0f0bba9 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 */ @@ -70,6 +71,10 @@ class EmojiPickerMenu extends Component { // This is because each row of 8 emojis counts as one index to the flatlist this.headerRowIndices = _.map(this.headerEmojis, (headerEmoji) => Math.floor(headerEmoji.index / CONST.EMOJI_NUM_PER_ROW)); + // 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.scrollToHighlightedIndex = this.scrollToHighlightedIndex.bind(this); @@ -105,7 +110,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(); @@ -500,7 +505,7 @@ class EmojiPickerMenu extends Component { onChangeText={this.filterEmojis} defaultValue="" ref={(el) => (this.searchInput = el)} - autoFocus={!this.props.isSmallScreenWidth} + autoFocus={this.shouldFocusInputOnScreenFocus} selectTextOnFocus={this.state.selectTextOnFocus} onSelectionChange={this.onSelectionChange} onFocus={() => this.setState({isFocused: true, highlightedIndex: -1, isUsingKeyboardMovement: false})}