From 9e0cb2f679f87898dc9e751e1ad77c539e80f57b Mon Sep 17 00:00:00 2001 From: Sujit Kumar <60378235+therealsujitk@users.noreply.github.com> Date: Wed, 24 May 2023 20:37:47 +0530 Subject: [PATCH 1/8] Hide mention suggestions while opening file picker --- src/pages/home/report/ReportActionCompose.js | 22 ++++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index 7a7cdf4a45ad..633a0e3f3026 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -182,7 +182,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); + this.setShouldBlockSuggestionsCalcToFalse = this.setShouldBlockSuggestionsCalcToFalse.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 @@ -273,6 +273,10 @@ class ReportActionCompose extends React.Component { } onSelectionChange(e) { + if (this.state.shouldBlockSuggestionsCalc) { + this.setShouldBlockSuggestionsCalcToFalse(); + return; + } LayoutAnimation.configureNext(LayoutAnimation.create(50, LayoutAnimation.Types.easeInEaseOut, LayoutAnimation.Properties.opacity)); this.setState({selection: e.nativeEvent.selection}); if (!this.state.value || e.nativeEvent.selection.end < 1) { @@ -416,9 +420,9 @@ class ReportActionCompose extends React.Component { } // eslint-disable-next-line rulesdir/prefer-early-return - setShouldBlockEmojiCalcToFalse() { - if (this.state && this.state.shouldBlockEmojiCalc) { - this.setState({shouldBlockEmojiCalc: false}); + setShouldBlockSuggestionsCalcToFalse() { + if (this.state && this.state.shouldBlockSuggestionsCalc) { + this.setState({shouldBlockSuggestionsCalc: false}); } } @@ -505,10 +509,6 @@ class ReportActionCompose extends React.Component { * Calculates and cares about the content of an Emoji Suggester */ calculateEmojiSuggestion() { - 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); @@ -936,7 +936,7 @@ class ReportActionCompose extends React.Component { onConfirm={this.addAttachment} onModalShow={() => this.setState({isAttachmentPreviewActive: true})} onModalHide={() => { - this.setShouldBlockEmojiCalcToFalse(); + this.setShouldBlockSuggestionsCalcToFalse(); this.setState({isAttachmentPreviewActive: false}); }} > @@ -1020,7 +1020,7 @@ class ReportActionCompose extends React.Component { // 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}); + this.setState({shouldBlockSuggestionsCalc: true}); } openPicker({ @@ -1074,7 +1074,7 @@ class ReportActionCompose extends React.Component { this.setIsFocused(false); this.resetSuggestions(); }} - onClick={this.setShouldBlockEmojiCalcToFalse} + onClick={this.setShouldBlockSuggestionsCalcToFalse} onPasteFile={displayFileInModal} shouldClear={this.state.textInputShouldClear} onClear={() => this.setTextInputShouldClear(false)} From ad9a141913f66542a2174090ec54ee3ae8f9b846 Mon Sep 17 00:00:00 2001 From: Sujit Kumar <60378235+therealsujitk@users.noreply.github.com> Date: Thu, 25 May 2023 16:55:50 +0530 Subject: [PATCH 2/8] Add shouldBlockSuggestionsCalc to initial state --- src/pages/home/report/ReportActionCompose.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index 633a0e3f3026..31863b464f41 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -273,16 +273,16 @@ class ReportActionCompose extends React.Component { } onSelectionChange(e) { - if (this.state.shouldBlockSuggestionsCalc) { - this.setShouldBlockSuggestionsCalcToFalse(); - return; - } LayoutAnimation.configureNext(LayoutAnimation.create(50, LayoutAnimation.Types.easeInEaseOut, LayoutAnimation.Properties.opacity)); this.setState({selection: e.nativeEvent.selection}); if (!this.state.value || e.nativeEvent.selection.end < 1) { this.resetSuggestions(); return; } + if (this.state.shouldBlockSuggestionsCalc) { + this.setShouldBlockSuggestionsCalcToFalse(); + return; + } this.calculateEmojiSuggestion(); this.calculateMentionSuggestion(); } @@ -297,6 +297,7 @@ class ReportActionCompose extends React.Component { atSignIndex: -1, shouldShowEmojiSuggestionMenu: false, shouldShowMentionSuggestionMenu: false, + shouldBlockSuggestionsCalc: false, mentionPrefix: '', isAutoSuggestionPickerLarge: false, }; From 388ea7dc8101bccf643fd06f7c19bf701f4058ad Mon Sep 17 00:00:00 2001 From: Sujit Kumar <60378235+therealsujitk@users.noreply.github.com> Date: Fri, 26 May 2023 15:26:16 +0530 Subject: [PATCH 3/8] Change shouldBlockSuggestionsCalc to a normal variable --- src/pages/home/report/ReportActionCompose.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index 31863b464f41..d5632b731bb6 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -192,6 +192,9 @@ class ReportActionCompose extends React.Component { // prevent auto focus on existing chat for mobile device this.shouldFocusInputOnScreenFocus = canFocusInputOnScreenFocus(); + // This variable is used to decide whether to block the suggestions list from showing to prevent flickering + this.shouldBlockSuggestionsCalc = false; + this.state = { isFocused: this.shouldFocusInputOnScreenFocus && !this.props.modal.isVisible && !this.props.modal.willAlertModalBecomeVisible && this.props.shouldShowComposeInput, isFullComposerAvailable: props.isComposerFullSize, @@ -273,16 +276,16 @@ class ReportActionCompose extends React.Component { } onSelectionChange(e) { + if (this.shouldBlockSuggestionsCalc) { + this.setShouldBlockSuggestionsCalcToFalse(); + return; + } LayoutAnimation.configureNext(LayoutAnimation.create(50, LayoutAnimation.Types.easeInEaseOut, LayoutAnimation.Properties.opacity)); this.setState({selection: e.nativeEvent.selection}); if (!this.state.value || e.nativeEvent.selection.end < 1) { this.resetSuggestions(); return; } - if (this.state.shouldBlockSuggestionsCalc) { - this.setShouldBlockSuggestionsCalcToFalse(); - return; - } this.calculateEmojiSuggestion(); this.calculateMentionSuggestion(); } @@ -297,7 +300,6 @@ class ReportActionCompose extends React.Component { atSignIndex: -1, shouldShowEmojiSuggestionMenu: false, shouldShowMentionSuggestionMenu: false, - shouldBlockSuggestionsCalc: false, mentionPrefix: '', isAutoSuggestionPickerLarge: false, }; @@ -422,9 +424,7 @@ class ReportActionCompose extends React.Component { // eslint-disable-next-line rulesdir/prefer-early-return setShouldBlockSuggestionsCalcToFalse() { - if (this.state && this.state.shouldBlockSuggestionsCalc) { - this.setState({shouldBlockSuggestionsCalc: false}); - } + this.shouldBlockSuggestionsCalc = false; } /** @@ -1021,7 +1021,7 @@ class ReportActionCompose extends React.Component { // 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({shouldBlockSuggestionsCalc: true}); + this.shouldBlockSuggestionsCalc = true; } openPicker({ From bdde009b3a3ce05cb8a9818dea286758d9fc17a0 Mon Sep 17 00:00:00 2001 From: Sujit Kumar <60378235+therealsujitk@users.noreply.github.com> Date: Fri, 26 May 2023 15:28:16 +0530 Subject: [PATCH 4/8] Fix suggestions list issues with mWeb --- src/pages/home/report/ReportActionCompose.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index d5632b731bb6..2a562a7c51d8 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -1075,7 +1075,7 @@ class ReportActionCompose extends React.Component { this.setIsFocused(false); this.resetSuggestions(); }} - onClick={this.setShouldBlockSuggestionsCalcToFalse} + onMouseDown={this.setShouldBlockSuggestionsCalcToFalse} onPasteFile={displayFileInModal} shouldClear={this.state.textInputShouldClear} onClear={() => this.setTextInputShouldClear(false)} From a26441a9cdeb28a09a27f6e455c631f1cb8b4ace Mon Sep 17 00:00:00 2001 From: Sujit Kumar <60378235+therealsujitk@users.noreply.github.com> Date: Fri, 26 May 2023 16:53:57 +0530 Subject: [PATCH 5/8] Manually call onSelectionChange onClick --- src/pages/home/report/ReportActionCompose.js | 23 ++++++++++++++------ 1 file changed, 16 insertions(+), 7 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index f8fe64818673..a5cc77136d4f 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -284,16 +284,22 @@ class ReportActionCompose extends React.Component { } onSelectionChange(e) { + LayoutAnimation.configureNext(LayoutAnimation.create(50, LayoutAnimation.Types.easeInEaseOut, LayoutAnimation.Properties.opacity)); + + if (e) { + this.setState({selection: e.nativeEvent.selection}); + if (!this.state.value || e.nativeEvent.selection.end < 1) { + this.resetSuggestions(); + this.setShouldBlockSuggestionsCalcToFalse(); + return; + } + } + if (this.shouldBlockSuggestionsCalc) { this.setShouldBlockSuggestionsCalcToFalse(); return; } - LayoutAnimation.configureNext(LayoutAnimation.create(50, LayoutAnimation.Types.easeInEaseOut, LayoutAnimation.Properties.opacity)); - this.setState({selection: e.nativeEvent.selection}); - if (!this.state.value || e.nativeEvent.selection.end < 1) { - this.resetSuggestions(); - return; - } + this.calculateEmojiSuggestion(); this.calculateMentionSuggestion(); } @@ -1083,7 +1089,10 @@ class ReportActionCompose extends React.Component { this.setIsFocused(false); this.resetSuggestions(); }} - onMouseDown={this.setShouldBlockSuggestionsCalcToFalse} + onClick={() => { + this.setShouldBlockSuggestionsCalcToFalse(); + this.onSelectionChange(); + }} onPasteFile={displayFileInModal} shouldClear={this.state.textInputShouldClear} onClear={() => this.setTextInputShouldClear(false)} From 39d7ca24fd8c28f0a9fa5ef998703873432f0d7f Mon Sep 17 00:00:00 2001 From: Sujit Kumar <60378235+therealsujitk@users.noreply.github.com> Date: Fri, 26 May 2023 17:56:03 +0530 Subject: [PATCH 6/8] Deprecate setShouldBlockSuggestionsCalcToFalse --- src/pages/home/report/ReportActionCompose.js | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index a5cc77136d4f..72b0cd27da25 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -183,7 +183,6 @@ class ReportActionCompose extends React.Component { this.updateNumberOfLines = this.updateNumberOfLines.bind(this); this.showPopoverMenu = this.showPopoverMenu.bind(this); this.comment = props.comment; - this.setShouldBlockSuggestionsCalcToFalse = this.setShouldBlockSuggestionsCalcToFalse.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 @@ -290,13 +289,13 @@ class ReportActionCompose extends React.Component { this.setState({selection: e.nativeEvent.selection}); if (!this.state.value || e.nativeEvent.selection.end < 1) { this.resetSuggestions(); - this.setShouldBlockSuggestionsCalcToFalse(); + this.shouldBlockSuggestionsCalc = false; return; } } if (this.shouldBlockSuggestionsCalc) { - this.setShouldBlockSuggestionsCalcToFalse(); + this.shouldBlockSuggestionsCalc = false; return; } @@ -436,11 +435,6 @@ class ReportActionCompose extends React.Component { } } - // eslint-disable-next-line rulesdir/prefer-early-return - setShouldBlockSuggestionsCalcToFalse() { - this.shouldBlockSuggestionsCalc = false; - } - /** * Determines if we can show the task option * @param {Array} reportParticipants @@ -951,7 +945,7 @@ class ReportActionCompose extends React.Component { onConfirm={this.addAttachment} onModalShow={() => this.setState({isAttachmentPreviewActive: true})} onModalHide={() => { - this.setShouldBlockSuggestionsCalcToFalse(); + this.shouldBlockSuggestionsCalc = false; this.setState({isAttachmentPreviewActive: false}); }} > @@ -1090,7 +1084,7 @@ class ReportActionCompose extends React.Component { this.resetSuggestions(); }} onClick={() => { - this.setShouldBlockSuggestionsCalcToFalse(); + this.shouldBlockSuggestionsCalc = false; this.onSelectionChange(); }} onPasteFile={displayFileInModal} From 5f0c1ad870777fc662ecfdc0c5e0e5b775ff4765 Mon Sep 17 00:00:00 2001 From: Sujit Kumar <60378235+therealsujitk@users.noreply.github.com> Date: Fri, 26 May 2023 20:32:22 +0530 Subject: [PATCH 7/8] Fix suggestions list issues with mWeb and revert changes --- src/pages/home/report/ReportActionCompose.js | 45 +++++++++++--------- 1 file changed, 25 insertions(+), 20 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index 72b0cd27da25..55ea4f485706 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -194,8 +194,9 @@ class ReportActionCompose extends React.Component { this.shouldAutoFocus = !props.modal.isVisible && (this.shouldFocusInputOnScreenFocus || this.isEmptyChat()) && props.shouldShowComposeInput; - // This variable is used to decide whether to block the suggestions list from showing to prevent flickering - this.shouldBlockSuggestionsCalc = false; + // These variables are used to decide whether to block the suggestions list from showing to prevent flickering + this.shouldBlockEmojiCalc = false; + this.shouldBlockMentionCalc = false; // For mobile Safari, updating the selection prop on an unfocused input will cause it to automatically gain focus // and subsequent programmatic focus shifts (e.g., modal focus trap) to show the blue frame (:focus-visible style), @@ -284,21 +285,13 @@ class ReportActionCompose extends React.Component { onSelectionChange(e) { LayoutAnimation.configureNext(LayoutAnimation.create(50, LayoutAnimation.Types.easeInEaseOut, LayoutAnimation.Properties.opacity)); - - if (e) { - this.setState({selection: e.nativeEvent.selection}); - if (!this.state.value || e.nativeEvent.selection.end < 1) { - this.resetSuggestions(); - this.shouldBlockSuggestionsCalc = false; - return; - } - } - - if (this.shouldBlockSuggestionsCalc) { - this.shouldBlockSuggestionsCalc = false; + this.setState({selection: e.nativeEvent.selection}); + if (!this.state.value || e.nativeEvent.selection.end < 1) { + this.resetSuggestions(); + this.shouldBlockEmojiCalc = false; + this.shouldBlockMentionCalc = false; return; } - this.calculateEmojiSuggestion(); this.calculateMentionSuggestion(); } @@ -518,6 +511,11 @@ class ReportActionCompose extends React.Component { * Calculates and cares about the content of an Emoji Suggester */ calculateEmojiSuggestion() { + if (this.shouldBlockEmojiCalc) { + this.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); @@ -544,6 +542,11 @@ class ReportActionCompose extends React.Component { } calculateMentionSuggestion() { + if (this.shouldBlockMentionCalc) { + this.shouldBlockMentionCalc = false; + return; + } + const valueAfterTheCursor = this.state.value.substring(this.state.selection.end); const indexOfFirstWhitespaceCharOrEmojiAfterTheCursor = valueAfterTheCursor.search(CONST.REGEX.SPECIAL_CHAR_OR_EMOJI); @@ -945,7 +948,8 @@ class ReportActionCompose extends React.Component { onConfirm={this.addAttachment} onModalShow={() => this.setState({isAttachmentPreviewActive: true})} onModalHide={() => { - this.shouldBlockSuggestionsCalc = false; + this.shouldBlockEmojiCalc = false; + this.shouldBlockMentionCalc = false; this.setState({isAttachmentPreviewActive: false}); }} > @@ -1026,10 +1030,11 @@ 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, + // Set a flag to block suggestion 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.shouldBlockSuggestionsCalc = true; + this.shouldBlockEmojiCalc = true; + this.shouldBlockMentionCalc = true; } openPicker({ @@ -1084,8 +1089,8 @@ class ReportActionCompose extends React.Component { this.resetSuggestions(); }} onClick={() => { - this.shouldBlockSuggestionsCalc = false; - this.onSelectionChange(); + this.shouldBlockEmojiCalc = false + this.shouldBlockMentionCalc = false; }} onPasteFile={displayFileInModal} shouldClear={this.state.textInputShouldClear} From 495d71540641055a2c69ea30dbee36e3afc97ee6 Mon Sep 17 00:00:00 2001 From: Sujit Kumar <60378235+therealsujitk@users.noreply.github.com> Date: Fri, 26 May 2023 20:34:35 +0530 Subject: [PATCH 8/8] Add missing semicolon --- src/pages/home/report/ReportActionCompose.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index 55ea4f485706..8fdb715a345a 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -1089,7 +1089,7 @@ class ReportActionCompose extends React.Component { this.resetSuggestions(); }} onClick={() => { - this.shouldBlockEmojiCalc = false + this.shouldBlockEmojiCalc = false; this.shouldBlockMentionCalc = false; }} onPasteFile={displayFileInModal}