diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx index 5b89f09718c51..4281d1ddebd3d 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx @@ -812,7 +812,6 @@ function ComposerWithSuggestions( policyID={policyID} // Input value={value} - setValue={setValue} selection={selection} setSelection={setSelection} resetKeyboardInput={resetKeyboardInput} diff --git a/src/pages/home/report/ReportActionCompose/SuggestionEmoji.tsx b/src/pages/home/report/ReportActionCompose/SuggestionEmoji.tsx index c6a4738331b7f..3051bfb1689eb 100644 --- a/src/pages/home/report/ReportActionCompose/SuggestionEmoji.tsx +++ b/src/pages/home/report/ReportActionCompose/SuggestionEmoji.tsx @@ -60,6 +60,8 @@ function SuggestionEmoji( ref: ForwardedRef, ) { const [suggestionValues, setSuggestionValues] = useState(defaultSuggestionsValues); + const suggestionValuesRef = useRef(suggestionValues); + suggestionValuesRef.current = suggestionValues; const isEmojiSuggestionsMenuVisible = suggestionValues.suggestedEmojis.length > 0 && suggestionValues.shouldShowSuggestionMenu; @@ -149,15 +151,15 @@ function SuggestionEmoji( * Calculates and cares about the content of an Emoji Suggester */ const calculateEmojiSuggestion = useCallback( - (selectionStart?: number, selectionEnd?: number) => { - if (selectionStart !== selectionEnd || !selectionEnd || shouldBlockCalc.current || !value || (selectionStart === 0 && selectionEnd === 0)) { + (newValue: string, selectionStart?: number, selectionEnd?: number) => { + if (selectionStart !== selectionEnd || !selectionEnd || shouldBlockCalc.current || !newValue || (selectionStart === 0 && selectionEnd === 0)) { shouldBlockCalc.current = false; resetSuggestions(); return; } - const leftString = value.substring(0, selectionEnd); + const leftString = newValue.substring(0, selectionEnd); const colonIndex = leftString.lastIndexOf(':'); - const isCurrentlyShowingEmojiSuggestion = isEmojiCode(value, selectionEnd); + const isCurrentlyShowingEmojiSuggestion = isEmojiCode(newValue, selectionEnd); const nextState: SuggestionsValue = { suggestedEmojis: [], @@ -171,10 +173,16 @@ function SuggestionEmoji( nextState.shouldShowSuggestionMenu = !isEmptyObject(newSuggestedEmojis); } + // Early return if there is no update + const currentState = suggestionValuesRef.current; + if (nextState.suggestedEmojis.length === 0 && currentState.suggestedEmojis.length === 0) { + return; + } + setSuggestionValues((prevState) => ({...prevState, ...nextState})); setHighlightedEmojiIndex(0); }, - [value, preferredLocale, setHighlightedEmojiIndex, resetSuggestions], + [preferredLocale, setHighlightedEmojiIndex, resetSuggestions], ); useEffect(() => { @@ -182,8 +190,8 @@ function SuggestionEmoji( return; } - calculateEmojiSuggestion(selection.start, selection.end); - }, [selection, calculateEmojiSuggestion, isComposerFocused]); + calculateEmojiSuggestion(value, selection.start, selection.end); + }, [value, selection, calculateEmojiSuggestion, isComposerFocused]); const setShouldBlockSuggestionCalc = useCallback( (shouldBlockSuggestionCalc: boolean) => { diff --git a/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx b/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx index c4957f8b7fae1..8d37a1915cbd2 100644 --- a/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx +++ b/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx @@ -88,6 +88,8 @@ function SuggestionMention( const personalDetails = usePersonalDetails() ?? CONST.EMPTY_OBJECT; const {translate, formatPhoneNumber} = useLocalize(); const [suggestionValues, setSuggestionValues] = useState(defaultSuggestionsValues); + const suggestionValuesRef = useRef(suggestionValues); + suggestionValuesRef.current = suggestionValues; const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT); @@ -344,15 +346,15 @@ function SuggestionMention( ); const calculateMentionSuggestion = useCallback( - (selectionStart?: number, selectionEnd?: number) => { + (newValue: string, selectionStart?: number, selectionEnd?: number) => { if (selectionEnd !== selectionStart || !selectionEnd || shouldBlockCalc.current || selectionEnd < 1 || !isComposerFocused) { shouldBlockCalc.current = false; resetSuggestions(); return; } - const afterLastBreakLineIndex = value.lastIndexOf('\n', selectionEnd - 1) + 1; - const leftString = value.substring(afterLastBreakLineIndex, selectionEnd); + const afterLastBreakLineIndex = newValue.lastIndexOf('\n', selectionEnd - 1) + 1; + const leftString = newValue.substring(afterLastBreakLineIndex, selectionEnd); const words = leftString.split(CONST.REGEX.SPACE_OR_EMOJI); const lastWord: string = words.at(-1) ?? ''; const secondToLastWord = words[words.length - 3]; @@ -401,18 +403,24 @@ function SuggestionMention( nextState.shouldShowSuggestionMenu = true; } + // Early return if there is no update + const currentState = suggestionValuesRef.current; + if (currentState.suggestedMentions.length === 0 && nextState.suggestedMentions?.length === 0) { + return; + } + setSuggestionValues((prevState) => ({ ...prevState, ...nextState, })); setHighlightedMentionIndex(0); }, - [isComposerFocused, value, isGroupPolicyReport, setHighlightedMentionIndex, resetSuggestions, getUserMentionOptions, weightedPersonalDetails, getRoomMentionOptions, reports], + [isComposerFocused, isGroupPolicyReport, setHighlightedMentionIndex, resetSuggestions, getUserMentionOptions, weightedPersonalDetails, getRoomMentionOptions, reports], ); useEffect(() => { - calculateMentionSuggestion(selection.start, selection.end); - }, [selection, calculateMentionSuggestion]); + calculateMentionSuggestion(value, selection.start, selection.end); + }, [value, selection, calculateMentionSuggestion]); useEffect(() => { debouncedSearchInServer(); diff --git a/src/pages/home/report/ReportActionCompose/Suggestions.tsx b/src/pages/home/report/ReportActionCompose/Suggestions.tsx index 158c60b0e89a7..8b7171340b637 100644 --- a/src/pages/home/report/ReportActionCompose/Suggestions.tsx +++ b/src/pages/home/report/ReportActionCompose/Suggestions.tsx @@ -14,9 +14,6 @@ type SuggestionProps = { /** The current input value */ value: string; - /** Callback to update the current input value */ - setValue: (newValue: string) => void; - /** The current selection value */ selection: TextSelection; @@ -56,7 +53,6 @@ type SuggestionProps = { function Suggestions( { value, - setValue, selection, setSelection, updateComment, @@ -153,7 +149,6 @@ function Suggestions( const baseProps = { value, - setValue, setSelection, selection, updateComment, diff --git a/src/pages/home/report/ReportActionItemMessageEdit.tsx b/src/pages/home/report/ReportActionItemMessageEdit.tsx index 0ca9cf0b1a3ae..15b901689ddc6 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.tsx +++ b/src/pages/home/report/ReportActionItemMessageEdit.tsx @@ -534,7 +534,6 @@ function ReportActionItemMessageEdit( measureParentContainerAndReportCursor={measureParentContainerAndReportCursor} isGroupPolicyReport={false} value={draft} - setValue={setDraft} selection={selection} setSelection={setSelection} />