diff --git a/src/components/Composer/index.js b/src/components/Composer/index.js index 739d6ff3ab9c..dc9b5ba4ac67 100755 --- a/src/components/Composer/index.js +++ b/src/components/Composer/index.js @@ -18,6 +18,7 @@ import Text from '../Text'; import isEnterWhileComposition from '../../libs/KeyboardShortcut/isEnterWhileComposition'; import CONST from '../../CONST'; import withNavigation from '../withNavigation'; +import ReportActionComposeFocusManager from '../../libs/ReportActionComposeFocusManager'; const propTypes = { /** Maximum number of lines in the text input */ @@ -79,6 +80,9 @@ const propTypes = { /** Function to check whether composer is covered up or not */ checkComposerVisibility: PropTypes.func, + /** Whether this is the report action compose */ + isReportActionCompose: PropTypes.bool, + ...withLocalizePropTypes, ...windowDimensionsPropTypes, @@ -106,6 +110,7 @@ const defaultProps = { setIsFullComposerAvailable: () => {}, shouldCalculateCaretPosition: false, checkComposerVisibility: () => false, + isReportActionCompose: false, }; /** @@ -155,6 +160,7 @@ function Composer({ setIsFullComposerAvailable, checkComposerVisibility, selection: selectionProp, + isReportActionCompose, ...props }) { const textRef = useRef(null); @@ -370,6 +376,9 @@ function Composer({ } return () => { + if (!isReportActionCompose) { + ReportActionComposeFocusManager.clear(); + } unsubscribeFocus(); unsubscribeBlur(); document.removeEventListener('paste', handlePaste); @@ -448,6 +457,18 @@ function Composer({ numberOfLines={numberOfLines} disabled={isDisabled} onKeyPress={handleKeyPress} + onFocus={(e) => { + ReportActionComposeFocusManager.onComposerFocus(() => { + if (!textInput.current) { + return; + } + + textInput.current.focus(); + }); + if (props.onFocus) { + props.onFocus(e); + } + }} /> {shouldCalculateCaretPosition && renderElementForCaretPosition} diff --git a/src/libs/ReportActionComposeFocusManager.js b/src/libs/ReportActionComposeFocusManager.js index 2acbfadf98a8..7f31b17aaa57 100644 --- a/src/libs/ReportActionComposeFocusManager.js +++ b/src/libs/ReportActionComposeFocusManager.js @@ -2,16 +2,24 @@ import _ from 'underscore'; import React from 'react'; const composerRef = React.createRef(); +// There are two types of composer: general composer (edit composer) and main composer. +// The general composer callback will take priority if it exists. let focusCallback = null; +let mainComposerFocusCallback = null; /** * Register a callback to be called when focus is requested. * Typical uses of this would be call the focus on the ReportActionComposer. * * @param {Function} callback callback to register + * @param {Boolean} isMainComposer */ -function onComposerFocus(callback) { - focusCallback = callback; +function onComposerFocus(callback, isMainComposer = false) { + if (isMainComposer) { + mainComposerFocusCallback = callback; + } else { + focusCallback = callback; + } } /** @@ -20,6 +28,11 @@ function onComposerFocus(callback) { */ function focus() { if (!_.isFunction(focusCallback)) { + if (!_.isFunction(mainComposerFocusCallback)) { + return; + } + + mainComposerFocusCallback(); return; } @@ -29,9 +42,14 @@ function focus() { /** * Clear the registered focus callback * + * @param {Boolean} isMainComposer */ -function clear() { - focusCallback = null; +function clear(isMainComposer = false) { + if (isMainComposer) { + mainComposerFocusCallback = null; + } else { + focusCallback = null; + } } /** diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index 2363c8d57420..675fab95ff28 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -659,7 +659,7 @@ function ReportActionCompose({ } focus(false); - }); + }, true); }, [focus, isFocusedProp]); /** @@ -970,7 +970,7 @@ function ReportActionCompose({ } return () => { - ReportActionComposeFocusManager.clear(); + ReportActionComposeFocusManager.clear(true); KeyDownListener.removeKeyDownPressListner(focusComposerOnKeyPress); unsubscribeNavigationBlur(); @@ -1197,6 +1197,7 @@ function ReportActionCompose({ shouldClear={textInputShouldClear} onClear={() => setTextInputShouldClear(false)} isDisabled={isBlockedFromConcierge || disabled} + isReportActionCompose selection={selection} onSelectionChange={onSelectionChange} isFullComposerAvailable={isFullSizeComposerAvailable} diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index 0ceffc716e34..2d393f6f7030 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -219,6 +219,7 @@ function ReportActionItemMessageEdit(props) { debouncedSaveDraft.cancel(); Report.saveReportActionDraft(props.reportID, props.action, ''); ComposerActions.setShouldShowComposeInput(true); + ReportActionComposeFocusManager.clear(); ReportActionComposeFocusManager.focus(); // Scroll to the last comment after editing to make sure the whole comment is clearly visible in the report.