1
- import React , { useState } from 'react' ;
1
+ import { useFocusEffect } from '@react-navigation/native' ;
2
+ import React , { useCallback , useRef , useState } from 'react' ;
2
3
import { Keyboard , View } from 'react-native' ;
3
4
import Button from '@components/Button' ;
4
5
import HeaderWithBackButton from '@components/HeaderWithBackButton' ;
5
6
import Modal from '@components/Modal' ;
6
7
import ScreenWrapper from '@components/ScreenWrapper' ;
7
8
import ScrollView from '@components/ScrollView' ;
8
9
import TextInput from '@components/TextInput' ;
10
+ import type { BaseTextInputRef } from '@components/TextInput/BaseTextInput/types' ;
9
11
import useLocalize from '@hooks/useLocalize' ;
10
12
import useThemeStyles from '@hooks/useThemeStyles' ;
11
13
import CONST from '@src/CONST' ;
@@ -19,6 +21,25 @@ function TextSelectorModal({value, description = '', onValueSelected, isVisible,
19
21
const [ currentValue , setValue ] = useState ( value ) ;
20
22
const paddingStyle = usePaddingStyle ( ) ;
21
23
24
+ const inputRef = useRef < BaseTextInputRef | null > ( null ) ;
25
+ const focusTimeoutRef = useRef < NodeJS . Timeout | null > ( null ) ;
26
+
27
+ useFocusEffect (
28
+ useCallback ( ( ) => {
29
+ focusTimeoutRef . current = setTimeout ( ( ) => {
30
+ if ( inputRef . current && isVisible ) {
31
+ inputRef . current . focus ( ) ;
32
+ }
33
+ return ( ) => {
34
+ if ( ! focusTimeoutRef . current || ! isVisible ) {
35
+ return ;
36
+ }
37
+ clearTimeout ( focusTimeoutRef . current ) ;
38
+ } ;
39
+ } , CONST . ANIMATED_TRANSITION ) ;
40
+ } , [ isVisible ] ) ,
41
+ ) ;
42
+
22
43
return (
23
44
< Modal
24
45
type = { CONST . MODAL . MODAL_TYPE . RIGHT_DOCKED }
@@ -50,6 +71,12 @@ function TextSelectorModal({value, description = '', onValueSelected, isVisible,
50
71
{ ...rest }
51
72
value = { currentValue }
52
73
onInputChange = { setValue }
74
+ ref = { ( ref ) => {
75
+ if ( ! ref ) {
76
+ return ;
77
+ }
78
+ inputRef . current = ref ;
79
+ } }
53
80
/>
54
81
</ View >
55
82
< Button
0 commit comments