diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index e4c88999000b..6f2ee5bdd326 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -184,6 +184,7 @@ class ReportActionCompose extends React.Component { this.updateNumberOfLines = this.updateNumberOfLines.bind(this); this.showPopoverMenu = this.showPopoverMenu.bind(this); this.comment = props.comment; + this.setShouldBlockEmojiCalcToFalse = this.setShouldBlockEmojiCalcToFalse.bind(this); // React Native will retain focus on an input for native devices but web/mWeb behave differently so we have some focus management // code that will refocus the compose input after a user closes a modal or some other actions, see usage of ReportActionComposeFocusManager @@ -405,6 +406,13 @@ class ReportActionCompose extends React.Component { } } + // eslint-disable-next-line rulesdir/prefer-early-return + setShouldBlockEmojiCalcToFalse() { + if (this.state && this.state.shouldBlockEmojiCalc) { + this.setState({shouldBlockEmojiCalc: false}); + } + } + /** * Determines if we can show the task option * @param {Array} reportParticipants @@ -449,6 +457,10 @@ class ReportActionCompose extends React.Component { this.resetSuggestedEmojis(); return; } + if (this.state.shouldBlockEmojiCalc) { + this.setState({shouldBlockEmojiCalc: false}); + return; + } const leftString = this.state.value.substring(0, this.state.selection.end); const colonIndex = leftString.lastIndexOf(':'); const isCurrentlyShowingEmojiSuggestion = this.isEmojiCode(this.state.value, this.state.selection.end); @@ -775,6 +787,7 @@ class ReportActionCompose extends React.Component { {({displayFileInModal}) => ( <> @@ -852,6 +865,12 @@ class ReportActionCompose extends React.Component { icon: Expensicons.Paperclip, text: this.props.translate('reportActionCompose.addAttachment'), onSelected: () => { + // Set a flag to block emoji calculation until we're finished using the file picker, + // which will stop any flickering as the file picker opens on non-native devices. + if (this.willBlurTextInputOnTapOutside) { + this.setState({shouldBlockEmojiCalc: true}); + } + openPicker({ onPicked: displayFileInModal, }); @@ -899,6 +918,7 @@ class ReportActionCompose extends React.Component { this.setIsFocused(false); this.resetSuggestedEmojis(); }} + onClick={this.setShouldBlockEmojiCalcToFalse} onPasteFile={displayFileInModal} shouldClear={this.state.textInputShouldClear} onClear={() => this.setTextInputShouldClear(false)}