diff --git a/src/hooks/useAutoFocusInput.ts b/src/hooks/useAutoFocusInput.ts index 4ddf421af48d..ddc74aecd523 100644 --- a/src/hooks/useAutoFocusInput.ts +++ b/src/hooks/useAutoFocusInput.ts @@ -6,6 +6,7 @@ import {InteractionManager} from 'react-native'; import {moveSelectionToEnd, scrollToBottom} from '@libs/InputUtils'; import CONST from '@src/CONST'; import {useSplashScreenStateContext} from '@src/SplashScreenStateContext'; +import usePrevious from './usePrevious'; import useSidePane from './useSidePane'; type UseAutoFocusInput = { @@ -56,13 +57,14 @@ export default function useAutoFocusInput(isMultiline = false): UseAutoFocusInpu // Trigger focus when side pane transition ends const {isSidePaneTransitionEnded, shouldHideSidePane} = useSidePane(); + const prevShouldHideSidePane = usePrevious(shouldHideSidePane); useEffect(() => { - if (!shouldHideSidePane) { + if (!shouldHideSidePane || prevShouldHideSidePane) { return; } setIsScreenTransitionEnded(isSidePaneTransitionEnded); - }, [isSidePaneTransitionEnded, shouldHideSidePane]); + }, [isSidePaneTransitionEnded, shouldHideSidePane, prevShouldHideSidePane]); const inputCallbackRef = (ref: TextInput | null) => { inputRef.current = ref; diff --git a/src/hooks/useSidePane.ts b/src/hooks/useSidePane.ts index d0d579086bd6..ea03c65aa35d 100644 --- a/src/hooks/useSidePane.ts +++ b/src/hooks/useSidePane.ts @@ -56,7 +56,7 @@ function useSidePane() { const {windowWidth} = useWindowDimensions(); const sidePaneWidth = shouldUseNarrowLayout ? windowWidth : variables.sideBarWidth; - const [isSidePaneTransitionEnded, setIsSidePaneTransitionEnded] = useState(true); + const [isSidePaneTransitionEnded, setIsSidePaneTransitionEnded] = useState(false); const {shouldHideSidePane, shouldHideSidePaneBackdrop, shouldHideHelpButton, sidePaneNVP} = useSidePaneDisplayStatus(); const shouldHideToolTip = isExtraLargeScreenWidth ? !isSidePaneTransitionEnded : !shouldHideSidePane;