fix: e2e typing test

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

@@ -90,6 +90,9 @@ type ComposerWithSuggestionsProps = ComposerWithSuggestionsOnyxProps &
         /** Callback to blur composer */
         onBlur: (event: NativeSyntheticEvent<TextInputFocusEventData>) => void;
 
+        /** Callback to layout the composer */
+        onLayout: (event: LayoutChangeEvent) => void;
+
         /** Callback to update the value of the composer */
         onValueChange: (value: string) => void;
 
@@ -242,6 +245,7 @@ function ComposerWithSuggestions(
         isScrollLikelyLayoutTriggered,
         raiseIsScrollLikelyLayoutTriggered,
         onCleared = () => {},
+        onLayout: onLayoutProps,
 
         // Refs
         suggestionsRef,
@@ -686,13 +690,14 @@ function ComposerWithSuggestions(
 
     const onLayout = useCallback(
         (e: LayoutChangeEvent) => {
+            onLayoutProps?.(e);
             const composerLayoutHeight = e.nativeEvent.layout.height;
             if (composerHeight === composerLayoutHeight) {
                 return;
             }
             setComposerHeight(composerLayoutHeight);
         },
-        [composerHeight],
+        [composerHeight, onLayoutProps],
     );
 
     const onClear = useCallback(

src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/index.e2e.tsx

@@ -1,5 +1,6 @@
 import type {ForwardedRef} from 'react';
-import React, {forwardRef, useEffect, useRef} from 'react';
+import React, {forwardRef, useCallback, useRef} from 'react';
+import type {LayoutChangeEvent} from 'react-native';
 import {Keyboard} from 'react-native';
 import E2EClient from '@libs/E2E/client';
 import type {ComposerRef} from '@pages/home/report/ReportActionCompose/ReportActionCompose';
@@ -25,38 +26,41 @@ function ComposerWithSuggestionsE2e(props: ComposerWithSuggestionsProps, ref: Fo
     // disable compiler for this file.
 
     const textInputRef = useRef<ComposerRef | null>();
-
-    // Eventually Auto focus on e2e tests
-    useEffect(() => {
+    const hasFocusBeenRequested = useRef(false);
+    const onLayout = useCallback((event: LayoutChangeEvent) => {
         const testConfig = E2EClient.getCurrentActiveTestConfig();
         if (testConfig?.reportScreen && typeof testConfig.reportScreen !== 'string' && !testConfig?.reportScreen.autoFocus) {
             return;
         }
+        const canRequestFocus = event.nativeEvent.layout.width > 0 && !hasFocusBeenRequested.current;
+        if (!canRequestFocus) {
+            return;
+        }
 
-        // We need to wait for the component to be mounted before focusing
-        setTimeout(() => {
-            const setFocus = () => {
-                if (!(textInputRef && 'current' in textInputRef)) {
-                    return;
-                }
+        hasFocusBeenRequested.current = true;
+
+        const setFocus = () => {
+            if (!(textInputRef && 'current' in textInputRef)) {
+                return;
+            }
 
-                textInputRef.current?.focus(true);
+            textInputRef.current?.focus(true);
 
-                setTimeout(() => {
-                    // and actually let's verify that the keyboard is visible
-                    if (Keyboard.isVisible()) {
-                        return;
-                    }
+            setTimeout(() => {
+                // and actually let's verify that the keyboard is visible
+                if (Keyboard.isVisible()) {
+                    return;
+                }
 
-                    textInputRef.current?.blur();
-                    setFocus();
-                    // 1000ms is enough time for any keyboard to open
-                }, 1000);
-            };
+                textInputRef.current?.blur();
+                setFocus();
+                // 1000ms is enough time for any keyboard to open
+            }, 1000);
+        };
 
-            setFocus();
-        }, 1);
-    }, [textInputRef]);
+        // Simulate user behavior and don't set focus immediately
+        setTimeout(setFocus, 2000);
+    }, []);
 
     return (
         <ComposerWithSuggestions
@@ -69,6 +73,7 @@ function ComposerWithSuggestionsE2e(props: ComposerWithSuggestionsProps, ref: Fo
                     ref(composerRef);
                 }
             }}
+            onLayout={onLayout}
         >
             {/* Important: 
                     this has to be a child, as this container might not