Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to clear focus from an inputfield in React Native?

Tags:

react-native

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?

like image 453
Henkav141 Avatar asked Aug 30 '16 11:08

Henkav141


People also ask

How do I remove input from focus?

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.

How do I clear TextInput in React Native?

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 .

How do I see focus in React Native?

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.


3 Answers

You can add ref to your text input: <TextInput ref="input"> and then call this.refs.input.blur().

like image 99
Radek Czemerys Avatar answered Oct 20 '22 12:10

Radek Czemerys


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()
like image 10
Faisal Hassan Avatar answered Oct 20 '22 10:10

Faisal Hassan


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.

like image 4
Dave Welling Avatar answered Oct 20 '22 10:10

Dave Welling