CODEWITHSUNDEEP
react-native
Xavier C.
Xavier C.

Reputation: 1817

TextInput sometimes doesn't focus when located in a Modal

I open a Modal where there is a TextInput on top. My TextInput component has the autoFocus set to true. I can say my TextInput is focused about 6 times on 10 (open/close Modal). When it's not focused and if I try to tap (even several times) on TextInput, it doesn't want to focus.

I made another test, I set the autoFocus to false. When I open my Modal then I immediately tap the TextInput to get the focus, sometimes I have to tap twice before I get the focus on. So, it's like something didn't finish its loading before I could tap and get the focus. If I do the same test but I wait maybe 2 seconds before I do a first tap, I always get the focus.

So did you know if there is a conflict between Modal / TextInput / Keyboard?

Here is my code, in case:

    return (

        <View style={styles.container}>

          <TouchableOpacity
            style={styles.addressButton}
            onPress={() => {
              this.props.feedList([]);
              this.props.onPressBackButton();
            }}
          >
            <Linearicon name="arrow-left" size={30} color="white" />
          </TouchableOpacity>
          <View
            style={styles.searchBox}
          >
            <Linearicon style={styles.searchIcon} name="magnifier" size={16} color="#999999" />
            <TextInput
              style={[styles.searchBoxText, styles.searchBoxTextInput]}
              placeholder="Recherchez une adresse..."
              autoFocus={false}
              placeholderTextColor='#999999'
              autoCorrect={false}
              onChangeText={(text) => this.onChangeText(text)}
              value={this.state.address}
            />
          </View>
        </View>

      )

Upvotes: 6

Views: 4162

Answers (5)

gbravor
gbravor

Reputation: 81

I had the same issue, autoFocus prop seems kinda buggy when TextInput is inside modal, try this:

export default function Component() {
      const inputRef = React.useRef(null);
      return (
        <Modal isVisible={true} onShow={() => inputRef.current.focus()} >
          <TextInput ref={inputRef} />
        </Modal>
    }

Upvotes: 0

Pujan Shah
Pujan Shah

Reputation: 19

I also had the same issue like sometimes it was not get focus while reopen the modal. I agree with the @Saravanan's comment with just one addition by calling blur method before focus to textinput. That worked for me.

<Modal onShow={() => {
      this.textInput.blur();
      this.textInput.focus();
}}> 
    <TextInput ref={input => {this.textInput = input;}} />
</Modal>

Upvotes: 0

Saravanan Rajenderan
Saravanan Rajenderan

Reputation: 43

I also ran into a similar kind of problem. My TextInput has autoFocus in a modal. The TextInput focus worked, but the keyboard sometimes opened and sometimes it did not open. It appears to be a race condition, where autoFocus assigns focus before the modal is visible. The solution was to use onShow attribute in Modal. 

<Modal onShow={() => {this.textInput.focus();}} > 
<TextInput ref={input => {this.textInput = input;}} />
</Modal>

Upvotes: 4

Shalini
Shalini

Reputation: 219

setting the height for TextInput works.

example

<TextInput style={{textAlign:'center', fontSize:18, height:50,paddingBottom:35}} autoFocus={false} placeholder="Enter Name"  placeholderTextColor="grey"/>

Upvotes: 0

huangbong
huangbong

Reputation: 1

I have the same issue. Whenever TextInput is in a Modal the autofocus is super buggy. Probably a bug. Using RN 0.27.2.

Upvotes: -2

Related Questions