CODEWITHSUNDEEP
react-nativetextfield
sondrelv
sondrelv

Reputation: 121

Text Field is focusing on tap outside component

I have implemented a react-native-material-textfield TextField which is focusing on taps outside of the TextField component (but within a certain distance from the component). Why does this happen?

I have tried limiting the size of both container and inputContainer, as well as wrapping the TextField in a View shrinked to fit the TextField component.

This is my implementation of the TextField:

<TextField
      ref={this.passwordRef}
      secureTextEntry={true}
      containerStyle={{width: 300, backgroundColor: 'green'}}
      inputContainerStyle={{width:300, backgroundColor: 'yellow'}}
      tintColor={'rgba(0, 0, 0, .38)'}
      fontSize={20}
      enablesReturnKeyAutomatically={true}
      autoCapitalize='none'
      autoCorrect={false}
      returnKeyType='done'
      label='Password'
      error={this.state.errors.password}
      onChangeText={this.handlePasswordChange}
      value={this.state.password}
      />

Behavior of the TextField

The expected behavior is that the TextField should focus when tapped, not when the target of a tap is outside the component.

Upvotes: 0

Views: 292

Answers (2)

sondrelv
sondrelv

Reputation: 121

Finally figured this out. Even though no overflow was visible neither for the TextInput (referenced by style) nor the InputContainer (referenced by inputContainerStyle), setting the overflow prop to hidden for the containerStyle fixed my problem.

Upvotes: 1

Vikram Khemlani
Vikram Khemlani

Reputation: 635

set your style prop equal to the other widths: style = {{width: 300}}

If you have a width it is also best to specify a height if your component is not wrapped in a View.

Upvotes: 0

Related Questions