fix: show main composer when there is no focused draft

src/components/EmojiPicker/EmojiPickerButton.js

@@ -17,6 +17,9 @@ const propTypes = {
     /** Id to use for the emoji picker button */
     nativeID: PropTypes.string,
 
+    /** Mouse event handler */
+    onMouseDown: PropTypes.func,
+
     /**
      * ReportAction for EmojiPicker.
      */
@@ -31,6 +34,7 @@ const defaultProps = {
     isDisabled: false,
     nativeID: '',
     reportAction: {},
+    onMouseDown: undefined,
 };
 
 function EmojiPickerButton(props) {
@@ -45,6 +49,7 @@ function EmojiPickerButton(props) {
                 onPress={() => EmojiPickerAction.showEmojiPicker(props.onModalHide, props.onEmojiSelected, emojiPopoverAnchor, undefined, () => {}, props.reportAction)}
                 nativeID={props.nativeID}
                 accessibilityLabel={props.translate('reportActionCompose.emoji')}
+                onMouseDown={props.onMouseDown}
             >
                 {({hovered, pressed}) => (
                     <Icon

src/libs/openReportActionComposeViewWhenClosingMessageEdit/index.native.js → src/libs/setShouldShowMainComposeInputKeyboardAware/index.native.js

@@ -8,11 +8,17 @@ export default (shouldShow) => {
         keyboardDidHideListener = null;
     }
 
-    if (!shouldShow || !Keyboard.isVisible()) {
+    if (!shouldShow) {
         Composer.setShouldShowComposeInput(shouldShow);
         return;
     }
 
+    // If keyboard is already hidden, we should show composer immediately because keyboardDidHide event won't be called
+    if (!Keyboard.isVisible()) {
+        Composer.setShouldShowComposeInput(true);
+        return;
+    }
+
     keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {
         Composer.setShouldShowComposeInput(true);
         keyboardDidHideListener.remove();

src/pages/home/report/ReportActionItemMessageEdit.js

@@ -12,7 +12,7 @@ import * as StyleUtils from '../../../styles/StyleUtils';
 import containerComposeStyles from '../../../styles/containerComposeStyles';
 import Composer from '../../../components/Composer';
 import * as Report from '../../../libs/actions/Report';
-import openReportActionComposeViewWhenClosingMessageEdit from '../../../libs/openReportActionComposeViewWhenClosingMessageEdit';
+import setShouldShowMainComposeInputKeyboardAware from '../../../libs/setShouldShowMainComposeInputKeyboardAware';
 import ReportActionComposeFocusManager from '../../../libs/ReportActionComposeFocusManager';
 import EmojiPickerButton from '../../../components/EmojiPicker/EmojiPickerButton';
 import Icon from '../../../components/Icon';
@@ -74,9 +74,6 @@ const defaultProps = {
 };
 
 // native ids
-const saveButtonID = 'saveButton';
-const cancelButtonID = 'cancelButton';
-const emojiButtonID = 'emojiButton';
 const messageEditInput = 'messageEditInput';
 
 function ReportActionItemMessageEdit(props) {
@@ -128,9 +125,7 @@ function ReportActionItemMessageEdit(props) {
 
             // Show the main composer when the focused message is deleted from another client
             // to prevent the main composer stays hidden until we swtich to another chat.
-            if (isFocusedRef.current) {
-                ComposerActions.setShouldShowComposeInput(true);
-            }
+            ComposerActions.setShouldShowComposeInput(true);
         };
     }, [props.action.reportActionID]);
 
@@ -283,16 +278,15 @@ function ReportActionItemMessageEdit(props) {
                         <PressableWithFeedback
                             onPress={deleteDraft}
                             style={styles.chatItemSubmitButton}
-                            nativeID={cancelButtonID}
                             accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
                             accessibilityLabel={translate('common.close')}
                             // disable dimming
                             hoverDimmingValue={1}
                             pressDimmingValue={1}
                             hoverStyle={StyleUtils.getButtonBackgroundColorStyle(CONST.BUTTON_STATES.ACTIVE)}
                             pressStyle={StyleUtils.getButtonBackgroundColorStyle(CONST.BUTTON_STATES.PRESSED)}
+                            // Keep focus on the composer when cancel button is clicked.
                             onMouseDown={(e) => e.preventDefault()}
-                            onMouseUp={(e) => e.preventDefault()}
                         >
                             {({hovered, pressed}) => (
                                 <Icon
@@ -329,15 +323,15 @@ function ReportActionItemMessageEdit(props) {
                             onFocus={() => {
                                 setIsFocused(true);
                                 reportScrollManager.scrollToIndex({animated: true, index: props.index}, true);
-                                openReportActionComposeViewWhenClosingMessageEdit(false);
+                                setShouldShowMainComposeInputKeyboardAware(false);
                             }}
                             onBlur={(event) => {
                                 setIsFocused(false);
                                 const relatedTargetId = lodashGet(event, 'nativeEvent.relatedTarget.id');
                                 if (messageEditInput === relatedTargetId) {
                                     return;
                                 }
-                                openReportActionComposeViewWhenClosingMessageEdit(true);
+                                setShouldShowMainComposeInputKeyboardAware(true);
                             }}
                             selection={selection}
                             onSelectionChange={(e) => setSelection(e.nativeEvent.selection)}
@@ -348,8 +342,9 @@ function ReportActionItemMessageEdit(props) {
                             isDisabled={props.shouldDisableEmojiPicker}
                             onModalHide={() => InteractionManager.runAfterInteractions(() => textInputRef.current.focus())}
                             onEmojiSelected={addEmojiToTextBox}
-                            nativeID={emojiButtonID}
                             reportAction={props.action}
+                            // Keep focus on the composer when save button is clicked.
+                            onMouseDown={(e) => e.preventDefault()}
                         />
                     </View>
 
@@ -358,12 +353,12 @@ function ReportActionItemMessageEdit(props) {
                             <PressableWithFeedback
                                 style={[styles.chatItemSubmitButton, hasExceededMaxCommentLength ? {} : styles.buttonSuccess]}
                                 onPress={publishDraft}
-                                nativeID={saveButtonID}
                                 disabled={hasExceededMaxCommentLength}
                                 accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
                                 accessibilityLabel={translate('common.saveChanges')}
                                 hoverDimmingValue={1}
                                 pressDimmingValue={0.2}
+                                // Keep focus on the composer when save button is clicked.
                                 onMouseDown={(e) => e.preventDefault()}
                             >
                                 <Icon