diff --git a/src/components/Search/SearchRouter/SearchRouter.tsx b/src/components/Search/SearchRouter/SearchRouter.tsx index 87dd1439bf89..3cd971e50535 100644 --- a/src/components/Search/SearchRouter/SearchRouter.tsx +++ b/src/components/Search/SearchRouter/SearchRouter.tsx @@ -19,6 +19,7 @@ import type {SearchQueryItem} from '@components/SelectionListWithSections/Search import {isSearchQueryItem} from '@components/SelectionListWithSections/Search/SearchQueryListItem'; import type {SelectionListHandle} from '@components/SelectionListWithSections/types'; import useDebouncedState from '@hooks/useDebouncedState'; +import useFocusAfterNav from '@hooks/useFocusAfterNav'; import useKeyboardShortcut from '@hooks/useKeyboardShortcut'; import useLocalize from '@hooks/useLocalize'; import useOnyx from '@hooks/useOnyx'; @@ -474,6 +475,7 @@ function SearchRouter({onRouterClose, shouldHideInputCaret, isSearchRouterDispla }); const modalWidth = shouldUseNarrowLayout ? styles.w100 : {width: variables.searchRouterPopoverWidth}; + const autoFocus = useFocusAfterNav(textInputRef); return ( {shouldShowList && ( diff --git a/src/hooks/useFocusAfterNav/index.native.ts b/src/hooks/useFocusAfterNav/index.native.ts new file mode 100644 index 000000000000..a9a2563b34e0 --- /dev/null +++ b/src/hooks/useFocusAfterNav/index.native.ts @@ -0,0 +1,18 @@ +import {useFocusEffect} from '@react-navigation/native'; +import CONST from '@src/CONST'; +import type UseFocusAfterNav from './type'; + +/** We added a delay to focus on text input to allow navigation/modal animations to get completed, +see issue https://github.com/Expensify/App/issues/65855 for more details */ +const useFocusAfterNav: UseFocusAfterNav = (ref) => { + useFocusEffect(() => { + const timeoutId = setTimeout(() => { + ref.current?.focus(); + }, CONST.ANIMATED_TRANSITION); + + return () => clearTimeout(timeoutId); + }); + return false; +}; + +export default useFocusAfterNav; diff --git a/src/hooks/useFocusAfterNav/index.ts b/src/hooks/useFocusAfterNav/index.ts new file mode 100644 index 000000000000..64e5300e7dfc --- /dev/null +++ b/src/hooks/useFocusAfterNav/index.ts @@ -0,0 +1,7 @@ +import type UseFocusAfterNav from './type'; + +const useFocusAfterNav: UseFocusAfterNav = () => { + return true; +}; + +export default useFocusAfterNav; diff --git a/src/hooks/useFocusAfterNav/type.ts b/src/hooks/useFocusAfterNav/type.ts new file mode 100644 index 000000000000..379dadbde120 --- /dev/null +++ b/src/hooks/useFocusAfterNav/type.ts @@ -0,0 +1,6 @@ +import type {RefObject} from 'react'; +import type {AnimatedTextInputRef} from '@components/RNTextInput'; + +type UseFocusAfterNav = (ref: RefObject) => boolean; + +export default UseFocusAfterNav;