CODEWITHSUNDEEP
androidreact-native
user1354934
user1354934

Reputation: 8841

React Native TextInput still has focus after dismissing keyboard (cursor in the TextInput)

How can I get rid of the cursor in the text input after I dismiss the keyboard or press somewhere else?

This is just all I have for the TextInput:

<TextInput
  style={styles.searchBar}
  onChangeText={null}
  placeholder={'What are you searching for?'}
  underlineColorAndroid="transparent"
/>

Upvotes: 3

Views: 3942

Answers (2)

Jo&#227;o Victor F Souza
Jo&#227;o Victor F Souza

Reputation: 96

I know this question is a bit old but just improving Martin's answer you could do:

componentDidMount(){
  Keyboard.addListener('keyboardDidHide', this._forceLoseFocus);
}

<TextInput ref={(component) => this._textInput = component}/>

_forceLoseFocus = () => {
  this._textInput.blur();
}

Tested and working with React Native 0.55.4

Upvotes: 6

Martin Cup
Martin Cup

Reputation: 2582

I guess if you dismiss the keyboard on Android with the Android-Back-Button you will have to detect a press on that button or detect when the keyboard has disappeared. To check for the keyboard:

import {
  Keyboard
} from 'react-native';

class MyClass extends Component{
  //...
  componentDidMount () {
      Keyboard.addListener('keyboardDidHide', callback)
  }
  //...
}

And in your callback you could then call this.refs.yourInput.blur();

And if you want to try it with detecting the Backbutton-Press, but I'm not sure if that works for detecting the keyboard disappear.

Upvotes: 0

Related Questions