Merge pull request Expensify#90909 from margelo/@chrispader/composer-editing-regression-focus-highlight-after-delete

fix: Composer not highlighted after editing message

Author: mountiny

src/libs/focusEditAfterCancelDelete/index.native.ts

@@ -458,8 +458,10 @@ function PureReportActionItem({
     const disabledActions = useMemo(() => (!canWriteInReport(report) ? RestrictedReadOnlyContextMenuActions : []), [report]);
 
     const hasActionErrors = !isEmptyValueObject(action.errors);
+
     // Receipt upload errors should still allow the context menu so the user can access "Delete expense"
     const hasOnlyReceiptErrors = hasActionErrors && Object.values(action.errors ?? {}).every((error) => error === null || isReceiptError(error));
+
     const isContextMenuDisabled = useMemo(() => {
         return draftMessage !== undefined || (hasActionErrors && !hasOnlyReceiptErrors) || !shouldDisplayContextMenuValue;
     }, [draftMessage, hasActionErrors, hasOnlyReceiptErrors, shouldDisplayContextMenuValue]);

src/libs/focusEditAfterCancelDelete/index.ts

@@ -328,7 +328,10 @@ function ComposerWithSuggestions({
         focusComposerWithDelay(composerRef.current, delay)(shouldDelay, forcedSelectionRange, forceKeyboardIfAlreadyFocused).catch(() => {});
     }, []);
 
-    const handleEditFocus = useCallback(() => focus(true, undefined, true), [focus]);
+    const handleEditFocus = useCallback(() => {
+        focus(true, undefined, true);
+        onFocus();
+    }, [focus, onFocus]);
 
     const handleEditValueChange = useCallback(
         (nextValue: string) => {

src/libs/focusEditAfterCancelDelete/types.ts

@@ -11,11 +11,17 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 
 type ExpandCollapseButtonProps = ViewProps & {
+    /** Whether the full composer is available */
     isFullComposerAvailable: boolean;
+    /** Whether the composer is full size */
     isComposerFullSize: boolean;
+    /** The report ID */
     reportID: string;
+    /** Function to raise the scroll is likely layout triggered */
     raiseIsScrollLikelyLayoutTriggered: () => void;
+    /** Function to set the composer full size */
     setIsComposerFullSize: (reportID: string, isFullSize: boolean) => void;
+    /** Whether the button is disabled */
     disabled?: boolean;
 };
 

src/pages/inbox/report/PureReportActionItem.tsx

@@ -8,7 +8,6 @@ import useOnyx from '@hooks/useOnyx';
 import useReportIsArchived from '@hooks/useReportIsArchived';
 import useReportScrollManager from '@hooks/useReportScrollManager';
 import {clearAllReportActionDrafts, editReportComment} from '@libs/actions/Report';
-import focusEditAfterCancelDelete from '@libs/focusEditAfterCancelDelete';
 import {getOriginalReportID} from '@libs/ReportUtils';
 import * as ReportActionContextMenu from '@pages/inbox/report/ContextMenu/ReportActionContextMenu';
 import {useReportActionActiveEditActions} from '@pages/inbox/report/ReportActionEditMessageContext';
@@ -83,7 +82,7 @@ function useEditMessage({reportID, originalReportID, reportAction, shouldScrollT
         // When user tries to save the empty message, it will delete it. Prompt the user to confirm deleting.
         if (!trimmedNewDraft) {
             composerRef.current?.blur();
-            ReportActionContextMenu.showDeleteModal(actionOwnerReportID, reportAction, true, deleteDraft, () => focusEditAfterCancelDelete(composerRef.current));
+            ReportActionContextMenu.showDeleteModal(actionOwnerReportID, reportAction, true, deleteDraft, () => requestIdleCallback(() => composerRef.current?.focus()));
             return;
         }