I have an inputfield and I want to get rid of the focus on it, after i click the submit button.
Any suggestions on how I would go about this?
To remove the focus on an input tag element in HTML, you can use the blur() method on the element using JavaScript. This input tag will be already focussed when a user visits the website and we want to remove the focus when we click the button below it.
To clear React Native TextInput, we can set the value with a state and clear the state. to set the value prop to val . And we set onChangeText to setVal to set val to the inputted value. Next, we add a Button with the onPress prop set to a function that set val to an empty string with setVal .
To check if an element is focused in React:Set the ref prop on the element. After the element is rendered, check if the element is the active element in the document. If it is, the element is focused.
You can add ref to your text input: <TextInput ref="input">
and then call this.refs.input.blur()
.
Keyboard.dismiss();
Keyboard.dismiss() will remove focus from all text input fields in view and hide keyboard. and for specific field you can use the above mentioned method
<TextInput ref="input">
this.refs.input.blur()
It may not seem like the obvious answer, but you can try the static method Keyboard.dismiss() for this. https://facebook.github.io/react-native/docs/keyboard I needed to remove the focus when uncertain which input might have it. This did the trick.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With