From 4d5e10853596f1942537e1c92f023e37f500b81c Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Thu, 5 Oct 2023 20:42:21 +0500 Subject: [PATCH 1/6] fix: show large suggestion menu only if there is space --- src/CONST.ts | 1 + src/pages/home/ReportScreen.js | 5 ++++- .../ReportActionCompose/ComposerWithSuggestions.js | 8 ++++++++ .../ReportActionCompose/ReportActionCompose.js | 6 ++++++ .../home/report/ReportActionCompose/Suggestions.js | 12 +++++------- src/pages/home/report/ReportFooter.js | 5 +++++ 6 files changed, 29 insertions(+), 8 deletions(-) diff --git a/src/CONST.ts b/src/CONST.ts index 0a262d868de9..56c8f099ae08 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -878,6 +878,7 @@ const CONST = { HERE_TEXT: '@here', }, COMPOSER_MAX_HEIGHT: 125, + CHAT_FOOTER_SECONDARY_ROW_HEIGHT: 25, CHAT_FOOTER_MIN_HEIGHT: 65, CHAT_SKELETON_VIEW: { AVERAGE_ROW_HEIGHT: 80, diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index 7a979ae18783..4f533c5dcb23 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -156,6 +156,7 @@ function ReportScreen({ const prevReport = usePrevious(report); const prevUserLeavingStatus = usePrevious(userLeavingStatus); const [isBannerVisible, setIsBannerVisible] = useState(true); + const [listHeight, setListHeight] = useState(0); const reportID = getReportID(route); const {addWorkspaceRoomOrChatPendingAction, addWorkspaceRoomOrChatErrors} = ReportUtils.getReportOfflinePendingActionAndErrors(report); @@ -343,7 +344,8 @@ function ReportScreen({ } }, [report, didSubscribeToReportLeavingEvents, reportID]); - const onListLayout = useCallback(() => { + const onListLayout = useCallback((e) => { + setListHeight((prev) => lodashGet(e, 'nativeEvent.layout.height', prev)); if (!markReadyForHydration) { return; } @@ -430,6 +432,7 @@ function ReportScreen({ isComposerFullSize={isComposerFullSize} onSubmitComment={onSubmitComment} policies={policies} + listHeight={listHeight} /> ) : ( diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js index 6e103f77c068..d0f31d5ea24a 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js @@ -93,6 +93,7 @@ function ComposerWithSuggestions({ submitForm, shouldShowComposeInput, measureParentContainer, + listHeight, // Refs suggestionsRef, animatedRef, @@ -128,6 +129,12 @@ function ComposerWithSuggestions({ // A flag to indicate whether the onScroll callback is likely triggered by a layout change (caused by text change) or not const isScrollLikelyLayoutTriggered = useRef(false); + const hasEnoughSpaceForLargeSuggestion = + listHeight - composerHeight - CONST.CHAT_FOOTER_SECONDARY_ROW_HEIGHT > + CONST.AUTO_COMPLETE_SUGGESTER.MAX_AMOUNT_OF_VISIBLE_SUGGESTIONS_IN_CONTAINER * CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT + + CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTER_INNER_PADDING * 2; + const isAutoSuggestionPickerLarge = !isSmallScreenWidth || (isSmallScreenWidth && hasEnoughSpaceForLargeSuggestion); + /** * Update frequently used emojis list. We debounce this method in the constructor so that UpdateFrequentlyUsedEmojis * API is not called too often. @@ -552,6 +559,7 @@ function ComposerWithSuggestions({ composerHeight={composerHeight} onInsertedEmoji={onInsertedEmoji} measureParentContainer={measureParentContainer} + isAutoSuggestionPickerLarge={isAutoSuggestionPickerLarge} // Input value={value} setValue={setValue} diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js index dedccc65a390..984ec4d1fbaa 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js @@ -60,6 +60,9 @@ const propTypes = { /** Whether user interactions should be disabled */ disabled: PropTypes.bool, + /** Height of the list which the composer is part of */ + listHeight: PropTypes.number, + // The NVP describing a user's block status blockedFromConcierge: PropTypes.shape({ // The date that the user will be unblocked @@ -83,6 +86,7 @@ const defaultProps = { isComposerFullSize: false, pendingAction: null, shouldShowComposeInput: true, + listHeight: 0, ...withCurrentUserPersonalDetailsDefaultProps, }; @@ -104,6 +108,7 @@ function ReportActionCompose({ report, reportID, reportActions, + listHeight, shouldShowComposeInput, }) { const {translate} = useLocalize(); @@ -386,6 +391,7 @@ function ReportActionCompose({ onFocus={onFocus} onBlur={onBlur} measureParentContainer={measureContainer} + listHeight={listHeight} /> { diff --git a/src/pages/home/report/ReportActionCompose/Suggestions.js b/src/pages/home/report/ReportActionCompose/Suggestions.js index a00bd342b17d..2be9363f25a1 100644 --- a/src/pages/home/report/ReportActionCompose/Suggestions.js +++ b/src/pages/home/report/ReportActionCompose/Suggestions.js @@ -2,7 +2,6 @@ import React, {useRef, useCallback, useImperativeHandle} from 'react'; import PropTypes from 'prop-types'; import SuggestionMention from './SuggestionMention'; import SuggestionEmoji from './SuggestionEmoji'; -import useWindowDimensions from '../../../../hooks/useWindowDimensions'; import * as SuggestionProps from './suggestionProps'; const propTypes = { @@ -15,11 +14,15 @@ const propTypes = { /** Function to clear the input */ resetKeyboardInput: PropTypes.func.isRequired, + /** Is auto suggestion picker large */ + isAutoSuggestionPickerLarge: PropTypes.bool, + ...SuggestionProps.baseProps, }; const defaultProps = { forwardedRef: null, + isAutoSuggestionPickerLarge: true, }; /** @@ -40,6 +43,7 @@ function Suggestions({ onInsertedEmoji, resetKeyboardInput, measureParentContainer, + isAutoSuggestionPickerLarge, }) { const suggestionEmojiRef = useRef(null); const suggestionMentionRef = useRef(null); @@ -90,12 +94,6 @@ function Suggestions({ [onSelectionChange, resetSuggestions, setShouldBlockSuggestionCalc, triggerHotkeyActions, updateShouldShowSuggestionMenuToFalse], ); - const {windowHeight, isSmallScreenWidth} = useWindowDimensions(); - - // the larger composerHeight the less space for EmojiPicker, Pixel 2 has pretty small screen and this value equal 5.3 - const hasEnoughSpaceForLargeSuggestion = windowHeight / composerHeight >= 6.8; - const isAutoSuggestionPickerLarge = !isSmallScreenWidth || (isSmallScreenWidth && hasEnoughSpaceForLargeSuggestion); - const baseProps = { value, setValue, diff --git a/src/pages/home/report/ReportFooter.js b/src/pages/home/report/ReportFooter.js index 51a8490162e5..2c62bb8e6a62 100644 --- a/src/pages/home/report/ReportFooter.js +++ b/src/pages/home/report/ReportFooter.js @@ -38,6 +38,9 @@ const propTypes = { /** Whether user interactions should be disabled */ shouldDisableCompose: PropTypes.bool, + /** Height of the list which the composer is part of */ + listHeight: PropTypes.number, + ...windowDimensionsPropTypes, }; @@ -48,6 +51,7 @@ const defaultProps = { pendingAction: null, shouldShowComposeInput: true, shouldDisableCompose: false, + listHeight: 0, }; function ReportFooter(props) { @@ -86,6 +90,7 @@ function ReportFooter(props) { pendingAction={props.pendingAction} isComposerFullSize={props.isComposerFullSize} disabled={props.shouldDisableCompose} + listHeight={props.listHeight} /> From 342c592d14caf04afa8cbc602bd056e1aab66707 Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Sun, 8 Oct 2023 18:27:35 +0500 Subject: [PATCH 2/6] feat: encapsulate chatItemComposeSecondaryRow styles --- src/CONST.ts | 3 ++- .../report/ReportActionCompose/ComposerWithSuggestions.js | 2 +- src/styles/styles.js | 6 +++--- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/CONST.ts b/src/CONST.ts index 3ebb0d415879..194759491e0f 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -902,7 +902,8 @@ const CONST = { HERE_TEXT: '@here', }, COMPOSER_MAX_HEIGHT: 125, - CHAT_FOOTER_SECONDARY_ROW_HEIGHT: 25, + CHAT_FOOTER_SECONDARY_ROW_HEIGHT: 15, + CHAT_FOOTER_SECONDARY_ROW_PADDING: 5, CHAT_FOOTER_MIN_HEIGHT: 65, CHAT_SKELETON_VIEW: { AVERAGE_ROW_HEIGHT: 80, diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js index f1571087e46d..ded572b52a08 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js @@ -130,7 +130,7 @@ function ComposerWithSuggestions({ const isScrollLikelyLayoutTriggered = useRef(false); const hasEnoughSpaceForLargeSuggestion = - listHeight - composerHeight - CONST.CHAT_FOOTER_SECONDARY_ROW_HEIGHT > + listHeight - composerHeight - (CONST.CHAT_FOOTER_SECONDARY_ROW_HEIGHT + 2 * CONST.CHAT_FOOTER_SECONDARY_ROW_PADDING) > CONST.AUTO_COMPLETE_SUGGESTER.MAX_AMOUNT_OF_VISIBLE_SUGGESTIONS_IN_CONTAINER * CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT + CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTER_INNER_PADDING * 2; const isAutoSuggestionPickerLarge = !isSmallScreenWidth || (isSmallScreenWidth && hasEnoughSpaceForLargeSuggestion); diff --git a/src/styles/styles.js b/src/styles/styles.js index f36e552c2ecd..bdf72b22ffba 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -817,9 +817,9 @@ const styles = (theme) => ({ }, chatItemComposeSecondaryRow: { - height: 15, - marginBottom: 5, - marginTop: 5, + height: CONST.CHAT_FOOTER_SECONDARY_ROW_HEIGHT, + marginBottom: CONST.CHAT_FOOTER_SECONDARY_ROW_PADDING, + marginTop: CONST.CHAT_FOOTER_SECONDARY_ROW_PADDING, }, chatItemComposeSecondaryRowSubText: { From c1e5a56808a80fa410d53b666f3b07906dc05b52 Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Mon, 9 Oct 2023 12:56:23 +0500 Subject: [PATCH 3/6] feat: move the hasEnoughSpaceForLargeSuggestion to a util fn --- src/libs/SuggestionUtils.js | 16 +++++++++++++++- .../ComposerWithSuggestions.js | 7 +++---- 2 files changed, 18 insertions(+), 5 deletions(-) diff --git a/src/libs/SuggestionUtils.js b/src/libs/SuggestionUtils.js index aa2640d006c8..db88a81b610e 100644 --- a/src/libs/SuggestionUtils.js +++ b/src/libs/SuggestionUtils.js @@ -26,4 +26,18 @@ function trimLeadingSpace(str) { return str.slice(0, 1) === ' ' ? str.slice(1) : str; } -export {getMaxArrowIndex, trimLeadingSpace}; +/** + * Checks if space is available to render large suggestion menu + * @param {Number} listHeight + * @param {Number} composerHeight + * @returns {Boolean} + */ +function spaceAvailableForLargeSuggestionMenu(listHeight, composerHeight) { + return ( + listHeight - composerHeight - (CONST.CHAT_FOOTER_SECONDARY_ROW_HEIGHT + 2 * CONST.CHAT_FOOTER_SECONDARY_ROW_PADDING) > + CONST.AUTO_COMPLETE_SUGGESTER.MAX_AMOUNT_OF_VISIBLE_SUGGESTIONS_IN_CONTAINER * CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT + + CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTER_INNER_PADDING * 2 + ); +} + +export {getMaxArrowIndex, trimLeadingSpace, spaceAvailableForLargeSuggestionMenu}; diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js index ded572b52a08..36ab58e44640 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js @@ -22,6 +22,7 @@ import usePrevious from '../../../../hooks/usePrevious'; import * as EmojiUtils from '../../../../libs/EmojiUtils'; import * as User from '../../../../libs/actions/User'; import * as ReportUtils from '../../../../libs/ReportUtils'; +import * as SuggestionUtils from '../../../../libs/SuggestionUtils'; import * as ReportActionsUtils from '../../../../libs/ReportActionsUtils'; import canFocusInputOnScreenFocus from '../../../../libs/canFocusInputOnScreenFocus'; import SilentCommentUpdater from './SilentCommentUpdater'; @@ -129,10 +130,8 @@ function ComposerWithSuggestions({ // A flag to indicate whether the onScroll callback is likely triggered by a layout change (caused by text change) or not const isScrollLikelyLayoutTriggered = useRef(false); - const hasEnoughSpaceForLargeSuggestion = - listHeight - composerHeight - (CONST.CHAT_FOOTER_SECONDARY_ROW_HEIGHT + 2 * CONST.CHAT_FOOTER_SECONDARY_ROW_PADDING) > - CONST.AUTO_COMPLETE_SUGGESTER.MAX_AMOUNT_OF_VISIBLE_SUGGESTIONS_IN_CONTAINER * CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT + - CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTER_INNER_PADDING * 2; + const hasEnoughSpaceForLargeSuggestion = SuggestionUtils.spaceAvailableForLargeSuggestionMenu(listHeight, composerHeight); + const isAutoSuggestionPickerLarge = !isSmallScreenWidth || (isSmallScreenWidth && hasEnoughSpaceForLargeSuggestion); /** From 477a03e23df39372044dbebacda0360704d6b1c5 Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Mon, 9 Oct 2023 13:12:03 +0500 Subject: [PATCH 4/6] feat: make the condition in spaceAvailableForLargeSuggestionMenu more readable --- src/libs/SuggestionUtils.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/libs/SuggestionUtils.js b/src/libs/SuggestionUtils.js index db88a81b610e..24c1e57fcd4f 100644 --- a/src/libs/SuggestionUtils.js +++ b/src/libs/SuggestionUtils.js @@ -33,11 +33,13 @@ function trimLeadingSpace(str) { * @returns {Boolean} */ function spaceAvailableForLargeSuggestionMenu(listHeight, composerHeight) { - return ( - listHeight - composerHeight - (CONST.CHAT_FOOTER_SECONDARY_ROW_HEIGHT + 2 * CONST.CHAT_FOOTER_SECONDARY_ROW_PADDING) > + const chatFooterHeight = CONST.CHAT_FOOTER_SECONDARY_ROW_HEIGHT + 2 * CONST.CHAT_FOOTER_SECONDARY_ROW_PADDING; + const availableHeight = listHeight - composerHeight - chatFooterHeight; + const menuHeight = CONST.AUTO_COMPLETE_SUGGESTER.MAX_AMOUNT_OF_VISIBLE_SUGGESTIONS_IN_CONTAINER * CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT + - CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTER_INNER_PADDING * 2 - ); + CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTER_INNER_PADDING * 2; + + return availableHeight > menuHeight; } export {getMaxArrowIndex, trimLeadingSpace, spaceAvailableForLargeSuggestionMenu}; From d14442a808f9cc79524dd03c46d531e56d974830 Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Mon, 9 Oct 2023 13:14:53 +0500 Subject: [PATCH 5/6] rename the spaceAvailableForLargeSuggestionMenu fn --- src/libs/SuggestionUtils.js | 4 ++-- .../report/ReportActionCompose/ComposerWithSuggestions.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/libs/SuggestionUtils.js b/src/libs/SuggestionUtils.js index 24c1e57fcd4f..6b03fe50354e 100644 --- a/src/libs/SuggestionUtils.js +++ b/src/libs/SuggestionUtils.js @@ -32,7 +32,7 @@ function trimLeadingSpace(str) { * @param {Number} composerHeight * @returns {Boolean} */ -function spaceAvailableForLargeSuggestionMenu(listHeight, composerHeight) { +function hasEnoughSpaceForLargeSuggestionMenu(listHeight, composerHeight) { const chatFooterHeight = CONST.CHAT_FOOTER_SECONDARY_ROW_HEIGHT + 2 * CONST.CHAT_FOOTER_SECONDARY_ROW_PADDING; const availableHeight = listHeight - composerHeight - chatFooterHeight; const menuHeight = @@ -42,4 +42,4 @@ function spaceAvailableForLargeSuggestionMenu(listHeight, composerHeight) { return availableHeight > menuHeight; } -export {getMaxArrowIndex, trimLeadingSpace, spaceAvailableForLargeSuggestionMenu}; +export {getMaxArrowIndex, trimLeadingSpace, hasEnoughSpaceForLargeSuggestionMenu}; diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js index 36ab58e44640..7cf5ced1f74b 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js @@ -130,7 +130,7 @@ function ComposerWithSuggestions({ // A flag to indicate whether the onScroll callback is likely triggered by a layout change (caused by text change) or not const isScrollLikelyLayoutTriggered = useRef(false); - const hasEnoughSpaceForLargeSuggestion = SuggestionUtils.spaceAvailableForLargeSuggestionMenu(listHeight, composerHeight); + const hasEnoughSpaceForLargeSuggestion = SuggestionUtils.hasEnoughSpaceForLargeSuggestionMenu(listHeight, composerHeight); const isAutoSuggestionPickerLarge = !isSmallScreenWidth || (isSmallScreenWidth && hasEnoughSpaceForLargeSuggestion); From af47c4c0c4957ef59e9cdc93448c6c51eff43322 Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Mon, 9 Oct 2023 19:40:11 +0500 Subject: [PATCH 6/6] feat: use total suggestions to calculate the menu height --- src/libs/SuggestionUtils.js | 6 ++++-- .../report/ReportActionCompose/ComposerWithSuggestions.js | 3 ++- .../home/report/ReportActionCompose/SuggestionEmoji.js | 5 ++++- .../home/report/ReportActionCompose/SuggestionMention.js | 5 ++++- src/pages/home/report/ReportActionCompose/Suggestions.js | 5 ++++- 5 files changed, 18 insertions(+), 6 deletions(-) diff --git a/src/libs/SuggestionUtils.js b/src/libs/SuggestionUtils.js index 6b03fe50354e..9c3e92799334 100644 --- a/src/libs/SuggestionUtils.js +++ b/src/libs/SuggestionUtils.js @@ -30,13 +30,15 @@ function trimLeadingSpace(str) { * Checks if space is available to render large suggestion menu * @param {Number} listHeight * @param {Number} composerHeight + * @param {Number} totalSuggestions * @returns {Boolean} */ -function hasEnoughSpaceForLargeSuggestionMenu(listHeight, composerHeight) { +function hasEnoughSpaceForLargeSuggestionMenu(listHeight, composerHeight, totalSuggestions) { + const maxSuggestions = CONST.AUTO_COMPLETE_SUGGESTER.MAX_AMOUNT_OF_VISIBLE_SUGGESTIONS_IN_CONTAINER; const chatFooterHeight = CONST.CHAT_FOOTER_SECONDARY_ROW_HEIGHT + 2 * CONST.CHAT_FOOTER_SECONDARY_ROW_PADDING; const availableHeight = listHeight - composerHeight - chatFooterHeight; const menuHeight = - CONST.AUTO_COMPLETE_SUGGESTER.MAX_AMOUNT_OF_VISIBLE_SUGGESTIONS_IN_CONTAINER * CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT + + (!totalSuggestions || totalSuggestions > maxSuggestions ? maxSuggestions : totalSuggestions) * CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT + CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTER_INNER_PADDING * 2; return availableHeight > menuHeight; diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js index 7cf5ced1f74b..120c87a21a23 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js @@ -129,8 +129,9 @@ function ComposerWithSuggestions({ // A flag to indicate whether the onScroll callback is likely triggered by a layout change (caused by text change) or not const isScrollLikelyLayoutTriggered = useRef(false); + const suggestions = lodashGet(suggestionsRef, 'current.getSuggestions', () => [])(); - const hasEnoughSpaceForLargeSuggestion = SuggestionUtils.hasEnoughSpaceForLargeSuggestionMenu(listHeight, composerHeight); + const hasEnoughSpaceForLargeSuggestion = SuggestionUtils.hasEnoughSpaceForLargeSuggestionMenu(listHeight, composerHeight, suggestions.length); const isAutoSuggestionPickerLarge = !isSmallScreenWidth || (isSmallScreenWidth && hasEnoughSpaceForLargeSuggestion); diff --git a/src/pages/home/report/ReportActionCompose/SuggestionEmoji.js b/src/pages/home/report/ReportActionCompose/SuggestionEmoji.js index 910a338c83b6..8c463a744bde 100644 --- a/src/pages/home/report/ReportActionCompose/SuggestionEmoji.js +++ b/src/pages/home/report/ReportActionCompose/SuggestionEmoji.js @@ -205,6 +205,8 @@ function SuggestionEmoji({ [shouldBlockCalc], ); + const getSuggestions = useCallback(() => suggestionValues.suggestedEmojis, [suggestionValues]); + useImperativeHandle( forwardedRef, () => ({ @@ -213,8 +215,9 @@ function SuggestionEmoji({ triggerHotkeyActions, setShouldBlockSuggestionCalc, updateShouldShowSuggestionMenuToFalse, + getSuggestions, }), - [onSelectionChange, resetSuggestions, setShouldBlockSuggestionCalc, triggerHotkeyActions, updateShouldShowSuggestionMenuToFalse], + [onSelectionChange, resetSuggestions, setShouldBlockSuggestionCalc, triggerHotkeyActions, updateShouldShowSuggestionMenuToFalse, getSuggestions], ); if (!isEmojiSuggestionsMenuVisible) { diff --git a/src/pages/home/report/ReportActionCompose/SuggestionMention.js b/src/pages/home/report/ReportActionCompose/SuggestionMention.js index 6c08b68cdc78..84bee9c80c7f 100644 --- a/src/pages/home/report/ReportActionCompose/SuggestionMention.js +++ b/src/pages/home/report/ReportActionCompose/SuggestionMention.js @@ -256,6 +256,8 @@ function SuggestionMention({ setSuggestionValues((prevState) => ({...prevState, suggestedMentions: []})); }, []); + const getSuggestions = useCallback(() => suggestionValues.suggestedMentions, [suggestionValues]); + useImperativeHandle( forwardedRef, () => ({ @@ -263,8 +265,9 @@ function SuggestionMention({ triggerHotkeyActions, setShouldBlockSuggestionCalc, updateShouldShowSuggestionMenuToFalse, + getSuggestions, }), - [resetSuggestions, setShouldBlockSuggestionCalc, triggerHotkeyActions, updateShouldShowSuggestionMenuToFalse], + [resetSuggestions, setShouldBlockSuggestionCalc, triggerHotkeyActions, updateShouldShowSuggestionMenuToFalse, getSuggestions], ); if (!isMentionSuggestionsMenuVisible) { diff --git a/src/pages/home/report/ReportActionCompose/Suggestions.js b/src/pages/home/report/ReportActionCompose/Suggestions.js index 2be9363f25a1..31cea1cf0364 100644 --- a/src/pages/home/report/ReportActionCompose/Suggestions.js +++ b/src/pages/home/report/ReportActionCompose/Suggestions.js @@ -48,6 +48,8 @@ function Suggestions({ const suggestionEmojiRef = useRef(null); const suggestionMentionRef = useRef(null); + const getSuggestions = useCallback(() => suggestionEmojiRef.current.getSuggestions() || suggestionMentionRef.current.getSuggestions(), []); + /** * Clean data related to EmojiSuggestions */ @@ -90,8 +92,9 @@ function Suggestions({ triggerHotkeyActions, updateShouldShowSuggestionMenuToFalse, setShouldBlockSuggestionCalc, + getSuggestions, }), - [onSelectionChange, resetSuggestions, setShouldBlockSuggestionCalc, triggerHotkeyActions, updateShouldShowSuggestionMenuToFalse], + [onSelectionChange, resetSuggestions, setShouldBlockSuggestionCalc, triggerHotkeyActions, updateShouldShowSuggestionMenuToFalse, getSuggestions], ); const baseProps = {