added composer focus glitch fix

src/ONYXKEYS.ts

@@ -47,6 +47,9 @@ const ONYXKEYS = {
     // draft status
     CUSTOM_STATUS_DRAFT: 'customStatusDraft',
 
+    // keep edit message focus state
+    INPUT_FOCUSED: 'inputFocused',
+
     /** Contains all the personalDetails the user has access to, keyed by accountID */
     PERSONAL_DETAILS_LIST: 'personalDetailsList',
 
@@ -312,6 +315,7 @@ type OnyxValues = {
     [ONYXKEYS.MODAL]: OnyxTypes.Modal;
     [ONYXKEYS.NETWORK]: OnyxTypes.Network;
     [ONYXKEYS.CUSTOM_STATUS_DRAFT]: OnyxTypes.CustomStatusDraft;
+    [ONYXKEYS.INPUT_FOCUSED]: boolean;
     [ONYXKEYS.PERSONAL_DETAILS_LIST]: Record<string, OnyxTypes.PersonalDetails>;
     [ONYXKEYS.PRIVATE_PERSONAL_DETAILS]: OnyxTypes.PrivatePersonalDetails;
     [ONYXKEYS.TASK]: OnyxTypes.Task;

src/libs/actions/InputFocus/index.desktop.ts

@@ -0,0 +1,29 @@
+import Onyx from 'react-native-onyx';
+import ONYXKEYS from '../../../ONYXKEYS';
+import ReportActionComposeFocusManager from '../../ReportActionComposeFocusManager';
+
+function inputFocusChange(focus: boolean) {
+    Onyx.set(ONYXKEYS.INPUT_FOCUSED, focus);
+}
+
+let refSave: HTMLElement | undefined;
+function composerFocusKeepFocusOn(ref: HTMLElement, isFocused: boolean, modal: {willAlertModalBecomeVisible: boolean; isVisible: boolean}, onyxFocused: boolean) {
+    if (isFocused && !onyxFocused) {
+        inputFocusChange(true);
+        ref.focus();
+    }
+    if (isFocused) {
+        refSave = ref;
+    }
+    if (!isFocused && !onyxFocused && !modal.willAlertModalBecomeVisible && !modal.isVisible && refSave) {
+        if (!ReportActionComposeFocusManager.isFocused()) {
+            refSave.focus();
+        } else {
+            refSave = undefined;
+        }
+    }
+}
+
+const callback = (method: () => void) => method();
+
+export {composerFocusKeepFocusOn, inputFocusChange, callback};

src/libs/actions/InputFocus/index.ts

@@ -0,0 +1,5 @@
+function inputFocusChange() {}
+function composerFocusKeepFocusOn() {}
+const callback = () => {};
+
+export {composerFocusKeepFocusOn, inputFocusChange, callback};

src/libs/actions/InputFocus/index.website.ts

@@ -0,0 +1,30 @@
+import Onyx from 'react-native-onyx';
+import ONYXKEYS from '../../../ONYXKEYS';
+import * as Browser from '../../Browser';
+import ReportActionComposeFocusManager from '../../ReportActionComposeFocusManager';
+
+function inputFocusChange(focus: boolean) {
+    Onyx.set(ONYXKEYS.INPUT_FOCUSED, focus);
+}
+
+let refSave: HTMLElement | undefined;
+function composerFocusKeepFocusOn(ref: HTMLElement, isFocused: boolean, modal: {willAlertModalBecomeVisible: boolean; isVisible: boolean}, onyxFocused: boolean) {
+    if (isFocused && !onyxFocused) {
+        inputFocusChange(true);
+        ref.focus();
+    }
+    if (isFocused) {
+        refSave = ref;
+    }
+    if (!isFocused && !onyxFocused && !modal.willAlertModalBecomeVisible && !modal.isVisible && refSave) {
+        if (!ReportActionComposeFocusManager.isFocused()) {
+            refSave.focus();
+        } else {
+            refSave = undefined;
+        }
+    }
+}
+
+const callback = (method: () => void) => !Browser.isMobile() && method();
+
+export {composerFocusKeepFocusOn, inputFocusChange, callback};

src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js

@@ -33,6 +33,7 @@ import withKeyboardState from '../../../../components/withKeyboardState';
 import {propTypes, defaultProps} from './composerWithSuggestionsProps';
 import focusWithDelay from '../../../../libs/focusWithDelay';
 import useDebounce from '../../../../hooks/useDebounce';
+import * as InputFocus from '../../../../libs/actions/InputFocus';
 
 const {RNTextInputReset} = NativeModules;
 
@@ -98,6 +99,7 @@ function ComposerWithSuggestions({
     animatedRef,
     forwardedRef,
     isNextModalWillOpenRef,
+    editFocused,
 }) {
     const {preferredLocale} = useLocalize();
     const isFocused = useIsFocused();
@@ -372,6 +374,7 @@ function ComposerWithSuggestions({
         if (!suggestionsRef.current) {
             return false;
         }
+        InputFocus.inputFocusChange(false);
         return suggestionsRef.current.setShouldBlockSuggestionCalc(false);
     }, [suggestionsRef]);
 
@@ -478,9 +481,12 @@ function ComposerWithSuggestions({
             return;
         }
 
+        if (editFocused) {
+            InputFocus.inputFocusChange(false);
+            return;
+        }
         focus();
-    }, [focus, prevIsFocused, prevIsModalVisible, isFocused, modal.isVisible, isNextModalWillOpenRef]);
-
+    }, [focus, prevIsFocused, editFocused, prevIsModalVisible, isFocused, modal.isVisible, isNextModalWillOpenRef]);
     useEffect(() => {
         if (value.length === 0) {
             return;
@@ -591,6 +597,9 @@ export default compose(
             key: ONYXKEYS.PREFERRED_EMOJI_SKIN_TONE,
             selector: EmojiUtils.getPreferredSkinToneIndex,
         },
+        editFocused: {
+            key: ONYXKEYS.INPUT_FOCUSED,
+        },
         parentReportActions: {
             key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.parentReportID}`,
             canEvict: false,

src/pages/home/report/ReportActionItemMessageEdit.js

@@ -37,6 +37,9 @@ import useReportScrollManager from '../../../hooks/useReportScrollManager';
 import * as EmojiPickerAction from '../../../libs/actions/EmojiPickerAction';
 import focusWithDelay from '../../../libs/focusWithDelay';
 import * as Browser from '../../../libs/Browser';
+import * as InputFocus from '../../../libs/actions/InputFocus';
+import onyxSubscribe from '../../../libs/onyxSubscribe';
+import ONYXKEYS from '../../../ONYXKEYS';
 
 const propTypes = {
     /** All the data of the action */
@@ -107,6 +110,8 @@ function ReportActionItemMessageEdit(props) {
     const [selection, setSelection] = useState(getInitialSelection());
     const [isFocused, setIsFocused] = useState(false);
     const [hasExceededMaxCommentLength, setHasExceededMaxCommentLength] = useState(false);
+    const [modal, setModal] = useState(false);
+    const [onyxFocused, setOnyxFocused] = useState(false);
 
     const textInputRef = useRef(null);
     const isFocusedRef = useRef(false);
@@ -124,6 +129,36 @@ function ReportActionItemMessageEdit(props) {
         isFocusedRef.current = isFocused;
     }, [isFocused]);
 
+    useEffect(() => {
+        InputFocus.composerFocusKeepFocusOn(textInputRef.current, isFocused, modal, onyxFocused);
+    }, [isFocused, modal, onyxFocused]);
+
+    useEffect(() => {
+        const unsubscribeOnyxModal = onyxSubscribe({
+            key: ONYXKEYS.MODAL,
+            callback: (modalArg) => {
+                if (_.isNull(modalArg)) {
+                    return;
+                }
+                setModal(modalArg);
+            },
+        });
+
+        const unsubscribeOnyxFocused = onyxSubscribe({
+            key: ONYXKEYS.INPUT_FOCUSED,
+            callback: (modalArg) => {
+                if (_.isNull(modalArg)) {
+                    return;
+                }
+                setOnyxFocused(modalArg);
+            },
+        });
+        return () => {
+            unsubscribeOnyxModal();
+            unsubscribeOnyxFocused();
+        };
+    }, []);
+
     // We consider the report action active if it's focused, its emoji picker is open or its context menu is open
     const isActive = useCallback(
         () => isFocusedRef.current || EmojiPickerAction.isActive(props.action.reportActionID) || ReportActionContextMenu.isActiveReportAction(props.action.reportActionID),
@@ -230,6 +265,8 @@ function ReportActionItemMessageEdit(props) {
      * Delete the draft of the comment being edited. This will take the comment out of "edit mode" with the old content.
      */
     const deleteDraft = useCallback(() => {
+        InputFocus.callback(() => setIsFocused(false));
+        InputFocus.inputFocusChange(false);
         debouncedSaveDraft.cancel();
         Report.saveReportActionDraft(props.reportID, props.action, '');