'Keyboard is not opening automatically though autoFocus={true}
I have a TextInput
inside a Modal
with autoFocus={true}
. As soon as Modal
is opened TextInput
is focused automatically but keyboard is not opening automatically.And surprisingly this is happening randomly. sometimes keyboard opens and sometimes not. This is happening in both emulator and real device.
Any suggestions to overcome this behavior? Thank You.
Solution 1:[1]
you can pass focus to TextInput using reference whenever a Modal is visible
<Modal onShow={() => {this.textInput.focus()}} >
<TextInput ref={input => {this.textInput = input}} />
</Modal>
Solution 2:[2]
I'm having the same problem currently. I used the solution suggestes by saumil and others previously; but adjusted for functional components:
import React, { useRef } from 'react';
...
let textInput = useRef(null);
<Modal onShow={() => { textInput.focus(); }} ...>
<TextInput ref={(input) => { textInput = input; }} ... />
</Modal>
It works, but I don't quite know what I'm doing (explanations welcomed). It's important to delete the autoFocus={true}
to get consistent results.
Solution 3:[3]
Need to check though,
// Keyboard IpM
InputMethodManager imm = (InputMethodManager)this.getSystemService(Context.INPUT_METHOD_SERVICE);
// input is TextInputEditText in here.
// adding a listener
input.setOnFocusChangeListener(new View.OnFocusChangeListener() {
@Override
public void onFocusChange(View v, boolean isFocused) {
if (isFocused) {
imm.toggleSoftInput(InputMethodManager.SHOW_FORCED, 0);
}
}
});
Solution 4:[4]
You can try focus
method. Like this;
focus() {
this.textInputRef.focus();
}
render() {
return (
<TextInput
ref={ref => {
this.textInputRef = ref;
}}
/>
);
}
Now you can call focus
function whenever you want. It will focus on the textinput and open the keyboard immediately.
Solution 5:[5]
This code is working for me. Use android:focusedByDefault="true"
<com.google.android.material.textfield.TextInputLayout
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Email">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:focusedByDefault="true" />
</com.google.android.material.textfield.TextInputLayout>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | |
Solution 2 | Mollifier |
Solution 3 | notTdar |
Solution 4 | firats |
Solution 5 | Satish Singh |