React-native: [Android - Modal ] TextInput doesn't get focus

[akaone]

Hello, I have 3 TextInput in a Modal, sadly some of the TextInput don't get focus unless you click them twice. To be more accurate when you click the first time they seem to loose the focus as soon as they get them....

<Modal
    animated={true}
    visible={this.props.visibility}
    onRequestClose={()=> this.props._hideModal()} >
    <View style={{backgroundColor:'#ededed'}}>
        <TextInput />
        <TextInput />
        <TextInput />
    </View>
</Modal>

Another thing is that the status bar get the default grey color when the modal shows up
Im using 0.23.1 on Windows and I've only test this on Android

[radko93]

Can't really reproduce this either on RN 0.23.1 or on master. Can you provide more detailed example?

[grabbou]

I would say (without opening up an example) that maybe on first click you are blurring the focused element and the second time, you focus the next one?

[filipArena]

To be more accurate when you click the first time they seem to loose the focus as soon as they get them....

This could be a scary re-rendering / layout calculation bug. Can you create a rnplay.org demo?

[akaone]

Ok, guys i figured out why it wasn't keeping the focus..My root view was a ScrollView

<ScrollView>
    <ComponentWithListView/>
    <Modal
        animated={true}
        visible={this.state.visibility}
        onRequestClose={()=> this._hideModal()} >
        <View style={{backgroundColor:'#ededed'}}>
            <TextInput />
            <TextInput />
           <TextInput />
        </View>
   </Modal>
</ScrollView>

So to solve this. changing the root ScrollView to a simple View should do, but in my case I stil need the ScrollView.
Wrapping the first component in a ScrollView and keeping the root as a View doesn't work...The listView doesn't scroll

<View>
    <ScrollView>
        <ComponentWithListView/>
    </ScrollView>
    <Modal
        animated={true}
        visible={this.state.visibility}
        onRequestClose={()=> this._hideModal()} >
        <View style={{backgroundColor:'#ededed'}}>
            <TextInput />
            <TextInput />
           <TextInput />
        </View>
   </Modal>
</View>

I'll try a couple things and I'll let you guys know

[kevinvangelder]

I am also experiencing this issue in RN 0.26.2. Here is the sample application demonstrating the issue: https://rnplay.org/apps/IP-5Vw

And here is a gif of me demonstrating the issue: https://api.monosnap.com/rpc/file/download?id=fGKRGd8gNGYnE1hAecCRrFhDV0Tzla

Notice that the only substantial difference between the top and bottom examples is that the top one is wrapped in a View and the bottom is wrapped in a ScrollView. The problem is that the top TouchableOpacity fires on the first click, even when the field is focused, but the bottom one requires a tap to blur the focused field and then a second tap to fire the button.

This issue affects both Android and iOS.

EDIT: A co-worker pointed out that this issue can be resolved by adding the keyboardShouldPersistTaps flag to the ScrollView.

[grabbou]

I am having the same issue when I present TextInput inside modal with autoFocus on iOS. It works on Simulator, but on device, when modal is presented, keyboard doesn't open. What's more, the input itself is not focusable - that is any taps won't trigger the keyboard. Turning that feature off solves the problem.

[lacker]

This issue seems like it has become a few different issues, at least one of which is fixed, so I am going to close it and suggest that people with persisting similar problems open a new issue here.

[eeeman1]

what is the solution to the problem? problem still exists. react-native v0.52

[krislm]

@eeeman1 How does the problem present itself to you?

[egemon]

@eeeman1 I met the same, if I understood this correct. What u need is

<ScrollView
  keyboardShouldPersistTaps="handled"
>
...
</ScrollView>

https://facebook.github.io/react-native/docs/scrollview.html#keyboardshouldpersisttaps