diff --git a/src/pages/home/report/ReportActionCompose/SuggestionMention.js b/src/pages/home/report/ReportActionCompose/SuggestionMention.js index d897df4e12ec..59221f57fd4b 100644 --- a/src/pages/home/report/ReportActionCompose/SuggestionMention.js +++ b/src/pages/home/report/ReportActionCompose/SuggestionMention.js @@ -9,6 +9,7 @@ import * as UserUtils from '../../../../libs/UserUtils'; import * as Expensicons from '../../../../components/Icon/Expensicons'; import * as SuggestionsUtils from '../../../../libs/SuggestionUtils'; import useLocalize from '../../../../hooks/useLocalize'; +import usePrevious from '../../../../hooks/usePrevious'; import ONYXKEYS from '../../../../ONYXKEYS'; import personalDetailsPropType from '../../../personalDetailsPropType'; import * as SuggestionProps from './suggestionProps'; @@ -57,6 +58,7 @@ function SuggestionMention({ isComposerFocused, }) { const {translate} = useLocalize(); + const previousValue = usePrevious(value); const [suggestionValues, setSuggestionValues] = useState(defaultSuggestionsValues); const isMentionSuggestionsMenuVisible = !_.isEmpty(suggestionValues.suggestedMentions) && suggestionValues.shouldShowSuggestionMenu; @@ -234,8 +236,15 @@ function SuggestionMention({ ); useEffect(() => { + if (value.length < previousValue.length) { + // A workaround to not show the suggestions list when the user deletes a character before the mention. + // It is caused by a buggy behavior of the TextInput on iOS. Should be fixed after migration to Fabric. + // See: https://github.com/facebook/react-native/pull/36930#issuecomment-1593028467 + return; + } + calculateMentionSuggestion(selection.end); - }, [selection, calculateMentionSuggestion]); + }, [selection, value, previousValue, calculateMentionSuggestion]); const updateShouldShowSuggestionMenuToFalse = useCallback(() => { setSuggestionValues((prevState) => {