From 2b76d0dd71a709740935552c5f813cfee94d5601 Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Fri, 15 Mar 2024 03:54:59 +0500 Subject: [PATCH 1/7] fix: allow suggestion menu to close once a mention is chosen --- .../report/ReportActionCompose/SuggestionMention.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx b/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx index 5f07dc66ea4d..bdb7f15923c4 100644 --- a/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx +++ b/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx @@ -167,6 +167,15 @@ function SuggestionMention( if (searchValue && !displayText.toLowerCase().includes(searchValue.toLowerCase())) { return false; } + + // Given a match, we need to check if the user is in the same private domain as the current user + // If the emails are in the same domain, we need to check if the mention code generated (with a space) + // is equal to the search value. If it is, we should not show the suggestion + const mentionCode = formatLoginPrivateDomain(detail?.login, detail?.login); + if (`${mentionCode} ` === searchValue) { + return false; + } + return true; }); @@ -247,7 +256,6 @@ function SuggestionMention( if (!isCursorBeforeTheMention && isMentionCode(suggestionWord)) { const suggestions = getMentionOptions(personalDetails, prefix); - nextState.suggestedMentions = suggestions; nextState.shouldShowSuggestionMenu = !!suggestions.length; } @@ -268,7 +276,6 @@ function SuggestionMention( // See: https://github.com/facebook/react-native/pull/36930#issuecomment-1593028467 return; } - calculateMentionSuggestion(selection.end); }, [selection, value, previousValue, calculateMentionSuggestion]); From 4c932777f2eaa7cb6302e78586310babff7b3d67 Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Fri, 15 Mar 2024 03:58:39 +0500 Subject: [PATCH 2/7] fix: add better comments --- src/pages/home/report/ReportActionCompose/SuggestionMention.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx b/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx index bdb7f15923c4..1d637364559b 100644 --- a/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx +++ b/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx @@ -171,6 +171,7 @@ function SuggestionMention( // Given a match, we need to check if the user is in the same private domain as the current user // If the emails are in the same domain, we need to check if the mention code generated (with a space) // is equal to the search value. If it is, we should not show the suggestion + // See https://github.com/Expensify/App/issues/38358 for more context const mentionCode = formatLoginPrivateDomain(detail?.login, detail?.login); if (`${mentionCode} ` === searchValue) { return false; From ae7b4a1537bab1c334948ba3c6527ce8c02ca7e5 Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Fri, 15 Mar 2024 21:04:30 +0500 Subject: [PATCH 3/7] fix: edge cases --- .../ReportActionCompose/SuggestionMention.tsx | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx b/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx index 1d637364559b..6df2ac7307e7 100644 --- a/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx +++ b/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx @@ -56,6 +56,8 @@ function SuggestionMention( shouldExcludeTextAreaNodes: false, }); + const suggestionInsertionRef = useRef(false); + // Used to decide whether to block the suggestions list from showing to prevent flickering const shouldBlockCalc = useRef(false); @@ -89,6 +91,8 @@ function SuggestionMention( const commentAfterMention = value.slice(suggestionValues.atSignIndex + suggestionValues.mentionPrefix.length + 1); updateComment(`${commentBeforeAtSign}${mentionCode} ${SuggestionsUtils.trimLeadingSpace(commentAfterMention)}`, true); + suggestionInsertionRef.current = true; + setSelection({ start: suggestionValues.atSignIndex + mentionCode.length + CONST.SPACE_LENGTH, end: suggestionValues.atSignIndex + mentionCode.length + CONST.SPACE_LENGTH, @@ -132,6 +136,8 @@ function SuggestionMention( return true; } + + suggestionInsertionRef.current = false; }, [highlightedMentionIndex, insertSelectedMention, resetSuggestions, suggestionValues.suggestedMentions.length], ); @@ -168,15 +174,6 @@ function SuggestionMention( return false; } - // Given a match, we need to check if the user is in the same private domain as the current user - // If the emails are in the same domain, we need to check if the mention code generated (with a space) - // is equal to the search value. If it is, we should not show the suggestion - // See https://github.com/Expensify/App/issues/38358 for more context - const mentionCode = formatLoginPrivateDomain(detail?.login, detail?.login); - if (`${mentionCode} ` === searchValue) { - return false; - } - return true; }); @@ -310,7 +307,10 @@ function SuggestionMention( [resetSuggestions, setShouldBlockSuggestionCalc, triggerHotkeyActions, updateShouldShowSuggestionMenuToFalse, getSuggestions], ); - if (!isMentionSuggestionsMenuVisible) { + // Given the mention is inserted by user, we don't want to show the mention options unless user + // uses presses any key again. + // See https://github.com/Expensify/App/issues/38358 for more context + if (!isMentionSuggestionsMenuVisible || suggestionInsertionRef.current) { return null; } From 0bc42299c3b1415efcf8e14ff55de26eb27fa729 Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Fri, 15 Mar 2024 21:54:48 +0500 Subject: [PATCH 4/7] fix: mroe edge cases --- .../report/ReportActionCompose/SuggestionMention.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx b/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx index 6df2ac7307e7..f53bceb25803 100644 --- a/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx +++ b/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx @@ -174,6 +174,13 @@ function SuggestionMention( return false; } + // Given the mention is inserted by user, we don't want to show the mention options unless user + // uses presses any key again. + // See https://github.com/Expensify/App/issues/38358 for more context + if (suggestionInsertionRef.current) { + return false; + } + return true; }); @@ -307,10 +314,7 @@ function SuggestionMention( [resetSuggestions, setShouldBlockSuggestionCalc, triggerHotkeyActions, updateShouldShowSuggestionMenuToFalse, getSuggestions], ); - // Given the mention is inserted by user, we don't want to show the mention options unless user - // uses presses any key again. - // See https://github.com/Expensify/App/issues/38358 for more context - if (!isMentionSuggestionsMenuVisible || suggestionInsertionRef.current) { + if (!isMentionSuggestionsMenuVisible) { return null; } From ad79f49bb3b5abede89545884a0c748bd83bef7b Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Fri, 15 Mar 2024 23:38:30 +0500 Subject: [PATCH 5/7] fix: mroe edge cases --- .../ReportActionCompose/SuggestionMention.tsx | 22 ++++++++++++------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx b/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx index f53bceb25803..cad363f9a01b 100644 --- a/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx +++ b/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx @@ -56,7 +56,15 @@ function SuggestionMention( shouldExcludeTextAreaNodes: false, }); - const suggestionInsertionRef = useRef(false); + // Used to store the selection index of the last inserted mention + const suggestionInsertionIndexRef = useRef(null); + + // Used to detect if the selection has changed since the last suggestion calculation + // If so, we reset the suggestionInsertionIndexRef + const hasSelectionChanged = !(selection.end === selection.start && selection.start === suggestionInsertionIndexRef.current); + if (hasSelectionChanged) { + suggestionInsertionIndexRef.current = null; + } // Used to decide whether to block the suggestions list from showing to prevent flickering const shouldBlockCalc = useRef(false); @@ -91,12 +99,12 @@ function SuggestionMention( const commentAfterMention = value.slice(suggestionValues.atSignIndex + suggestionValues.mentionPrefix.length + 1); updateComment(`${commentBeforeAtSign}${mentionCode} ${SuggestionsUtils.trimLeadingSpace(commentAfterMention)}`, true); - suggestionInsertionRef.current = true; - + const selectionPosition = suggestionValues.atSignIndex + mentionCode.length + CONST.SPACE_LENGTH; setSelection({ - start: suggestionValues.atSignIndex + mentionCode.length + CONST.SPACE_LENGTH, - end: suggestionValues.atSignIndex + mentionCode.length + CONST.SPACE_LENGTH, + start: selectionPosition, + end: selectionPosition, }); + suggestionInsertionIndexRef.current = selectionPosition; setSuggestionValues((prevState) => ({ ...prevState, suggestedMentions: [], @@ -136,8 +144,6 @@ function SuggestionMention( return true; } - - suggestionInsertionRef.current = false; }, [highlightedMentionIndex, insertSelectedMention, resetSuggestions, suggestionValues.suggestedMentions.length], ); @@ -177,7 +183,7 @@ function SuggestionMention( // Given the mention is inserted by user, we don't want to show the mention options unless user // uses presses any key again. // See https://github.com/Expensify/App/issues/38358 for more context - if (suggestionInsertionRef.current) { + if (suggestionInsertionIndexRef.current) { return false; } From 6736a26c2923ecffc7f0f6b9ab6c59f65ad2c5fd Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Fri, 15 Mar 2024 23:40:21 +0500 Subject: [PATCH 6/7] Update SuggestionMention.tsx --- src/pages/home/report/ReportActionCompose/SuggestionMention.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx b/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx index cad363f9a01b..8b14e2528cdb 100644 --- a/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx +++ b/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx @@ -59,7 +59,7 @@ function SuggestionMention( // Used to store the selection index of the last inserted mention const suggestionInsertionIndexRef = useRef(null); - // Used to detect if the selection has changed since the last suggestion calculation + // Used to detect if the selection has changed since the last suggestion insertion // If so, we reset the suggestionInsertionIndexRef const hasSelectionChanged = !(selection.end === selection.start && selection.start === suggestionInsertionIndexRef.current); if (hasSelectionChanged) { From 6eeb99402e83ffa64e961a00252a59fbaf61baf8 Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Fri, 15 Mar 2024 23:44:52 +0500 Subject: [PATCH 7/7] fix: mroe edge cases --- .../home/report/ReportActionCompose/SuggestionMention.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx b/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx index 8b14e2528cdb..e447bed67514 100644 --- a/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx +++ b/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx @@ -180,8 +180,8 @@ function SuggestionMention( return false; } - // Given the mention is inserted by user, we don't want to show the mention options unless user - // uses presses any key again. + // Given the mention is inserted by user, we don't want to show the mention options unless the + // selection index changes. In that case, suggestionInsertionIndexRef.current will be null. // See https://github.com/Expensify/App/issues/38358 for more context if (suggestionInsertionIndexRef.current) { return false;