diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx index 82482e1c0590..085aa2f7db9a 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx @@ -90,6 +90,9 @@ type ComposerWithSuggestionsProps = ComposerWithSuggestionsOnyxProps & /** Callback to blur composer */ onBlur: (event: NativeSyntheticEvent) => void; + /** Callback when layout of composer changes */ + 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( diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/index.e2e.tsx b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/index.e2e.tsx index c698cefe3349..a64513e5d3a3 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/index.e2e.tsx +++ b/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(); - - // 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 ( {/* Important: this has to be a child, as this container might not