fix: show main composer when there is no focused draft

src/components/EmojiPicker/EmojiPickerButton.js

@@ -14,8 +14,8 @@ const propTypes = {
     /** Flag to disable the emoji picker button */
     isDisabled: PropTypes.bool,
 
-    /** Id to use for the emoji picker button */
-    nativeID: PropTypes.string,
+    /** Mouse event handler */
+    onMouseDown: PropTypes.func,
 
     /**
      * ReportAction for EmojiPicker.
@@ -29,8 +29,8 @@ const propTypes = {
 
 const defaultProps = {
     isDisabled: false,
-    nativeID: '',
     reportAction: {},
+    onMouseDown: undefined,
 };
 
 function EmojiPickerButton(props) {
@@ -43,8 +43,8 @@ function EmojiPickerButton(props) {
                 style={({hovered, pressed}) => [styles.chatItemEmojiButton, StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed))]}
                 disabled={props.isDisabled}
                 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/setShouldShowMainComposeInputKeyboardAware/index.js

@@ -0,0 +1,5 @@
+import * as Composer from '../actions/Composer';
+
+export default (shouldShow) => {
+    Composer.setShouldShowComposeInput(shouldShow);
+};

src/libs/setShouldShowMainComposeInputKeyboardAware/index.native.js

@@ -0,0 +1,26 @@
+import {Keyboard} from 'react-native';
+import * as Composer from '../actions/Composer';
+
+let keyboardDidHideListener = null;
+export default (shouldShow) => {
+    if (keyboardDidHideListener) {
+        keyboardDidHideListener.remove();
+        keyboardDidHideListener = null;
+    }
+
+    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) {
@@ -202,8 +199,10 @@ function ReportActionItemMessageEdit(props) {
     const deleteDraft = useCallback(() => {
         debouncedSaveDraft.cancel();
         Report.saveReportActionDraft(props.reportID, props.action.reportActionID, '');
-        ComposerActions.setShouldShowComposeInput(true);
-        ReportActionComposeFocusManager.focus();
+        if (isFocusedRef.current) {
+            ComposerActions.setShouldShowComposeInput(true);
+            ReportActionComposeFocusManager.focus();
+        }
 
         // Scroll to the last comment after editing to make sure the whole comment is clearly visible in the report.
         if (props.index === 0) {
@@ -279,14 +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()}
                         >
                             {({hovered, pressed}) => (
                                 <Icon
@@ -323,21 +323,15 @@ function ReportActionItemMessageEdit(props) {
                             onFocus={() => {
                                 setIsFocused(true);
                                 reportScrollManager.scrollToIndex({animated: true, index: props.index}, true);
-                                ComposerActions.setShouldShowComposeInput(false);
+                                setShouldShowMainComposeInputKeyboardAware(false);
                             }}
                             onBlur={(event) => {
                                 setIsFocused(false);
                                 const relatedTargetId = lodashGet(event, 'nativeEvent.relatedTarget.id');
-
-                                // Return to prevent re-render when save/cancel button is pressed which cancels the onPress event by re-rendering
-                                if (_.contains([saveButtonID, cancelButtonID, emojiButtonID], relatedTargetId)) {
-                                    return;
-                                }
-
                                 if (messageEditInput === relatedTargetId) {
                                     return;
                                 }
-                                openReportActionComposeViewWhenClosingMessageEdit();
+                                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,13 @@ 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
                                     src={Expensicons.Checkmark}