From f3b78771f7b2573d50eb55a8bc6c389a0c1a46f5 Mon Sep 17 00:00:00 2001 From: Joel Davies Date: Mon, 1 May 2023 11:32:52 +0200 Subject: [PATCH 1/3] Prevent emoji suggestion flicker for attachments --- src/pages/home/report/ReportActionCompose.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index e4c88999000b..dc2417671523 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -449,6 +449,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 +779,7 @@ class ReportActionCompose extends React.Component { {this.setState({shouldBlockEmojiCalc: false})}} > {({displayFileInModal}) => ( <> @@ -852,6 +857,8 @@ class ReportActionCompose extends React.Component { icon: Expensicons.Paperclip, text: this.props.translate('reportActionCompose.addAttachment'), onSelected: () => { + this.willBlurTextInputOnTapOutside && this.setState({shouldBlockEmojiCalc: true}); + openPicker({ onPicked: displayFileInModal, }); @@ -899,6 +906,7 @@ class ReportActionCompose extends React.Component { this.setIsFocused(false); this.resetSuggestedEmojis(); }} + onClick={() => this.setState({shouldBlockEmojiCalc: false})} onPasteFile={displayFileInModal} shouldClear={this.state.textInputShouldClear} onClear={() => this.setTextInputShouldClear(false)} From 2f35950754222df283bcb41c214815625dcab8e1 Mon Sep 17 00:00:00 2001 From: Joel Davies Date: Mon, 1 May 2023 13:54:13 +0200 Subject: [PATCH 2/3] fix lint errors --- src/pages/home/report/ReportActionCompose.js | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index dc2417671523..03697617901f 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 @@ -779,7 +787,7 @@ class ReportActionCompose extends React.Component { {this.setState({shouldBlockEmojiCalc: false})}} + onModalHide={this.setShouldBlockEmojiCalcToFalse} > {({displayFileInModal}) => ( <> @@ -857,8 +865,10 @@ class ReportActionCompose extends React.Component { icon: Expensicons.Paperclip, text: this.props.translate('reportActionCompose.addAttachment'), onSelected: () => { - this.willBlurTextInputOnTapOutside && this.setState({shouldBlockEmojiCalc: true}); - + if (this.willBlurTextInputOnTapOutside) { + this.setState({shouldBlockEmojiCalc: true}); + } + openPicker({ onPicked: displayFileInModal, }); @@ -906,7 +916,7 @@ class ReportActionCompose extends React.Component { this.setIsFocused(false); this.resetSuggestedEmojis(); }} - onClick={() => this.setState({shouldBlockEmojiCalc: false})} + onClick={this.setShouldBlockEmojiCalcToFalse} onPasteFile={displayFileInModal} shouldClear={this.state.textInputShouldClear} onClear={() => this.setTextInputShouldClear(false)} From f46893a1f2b56f8f1de424d4285c618a286e76eb Mon Sep 17 00:00:00 2001 From: Joel Davies Date: Mon, 1 May 2023 16:52:59 +0200 Subject: [PATCH 3/3] add comment --- src/pages/home/report/ReportActionCompose.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index 03697617901f..6f2ee5bdd326 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -865,6 +865,8 @@ 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}); }