Skip to content

Commit

Permalink
Add showSoftInputOnFocus to TextInput (#25028)
Browse files Browse the repository at this point in the history
Summary:
Add prop showSoftInputOnFocus to TextInput. This fixes #14045. This prop can be used to prevent the system keyboard from displaying at all when focusing an input text, for example if a custom keyboard component needs to be displayed instead.

On Android, currently TextInput always open the soft keyboard when focused. This is because `requestFocus` calls `showSoftKeyboard`, which in turn instructs `InputMethodManager` to show the soft keyboard.

Unfortunately even if we were to define a new input type that extends ReactEditText, there is no way to overcome this issue.
This is because `showSoftKeyboard` is a private method so it can't be overriden. And at the same time `requestFocus` needs to invoke `super.requestFocus` to properly instruct Android that the field has gained focused, so overriding `requestFocus` in a subclass of ReactEditText is also not an option, as when invoking `super.requestFocus` we would end up calling again the one defined in ReactEditText.

So currently the only way of doing this is to basically add a listener on the focus event that will close the soft keyboard immediately after. But for a split second it will still be displayed.

The code in the PR changes `requestFocus` to honor showSoftInputOnFocus as defined in Android TextView, displaying the soft keyboard unless instructed otherwise.

## Changelog

[Android] [Added] - Add showSoftInputOnFocus to TextInput
Pull Request resolved: #25028

Differential Revision: D15503070

Pulled By: mdvacca

fbshipit-source-id: db4616fa165643d6ef2b3185008c4d279ae08092
  • Loading branch information
valerio.ponte authored and grabbou committed Aug 7, 2019
1 parent 812abfd commit b476ca0
Show file tree
Hide file tree
Showing 3 changed files with 16 additions and 1 deletion.
7 changes: 7 additions & 0 deletions Libraries/Components/TextInput/TextInput.js
Original file line number Diff line number Diff line change
Expand Up @@ -252,6 +252,7 @@ type AndroidProps = $ReadOnly<{|
| 'yes'
| 'yesExcludeDescendants'
),
showSoftInputOnFocus?: ?boolean,
|}>;

type Props = $ReadOnly<{|
Expand Down Expand Up @@ -925,6 +926,12 @@ const TextInput = createReactClass({
'newPassword',
'oneTimeCode',
]),
/**
* When `false`, it will prevent the soft keyboard from showing when the field is focused.
* Defaults to `true`.
* @platform android
*/
showSoftInputOnFocus: PropTypes.bool,
},
getDefaultProps() {
return {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -213,7 +213,9 @@ public boolean requestFocus(int direction, Rect previouslyFocusedRect) {
}
setFocusableInTouchMode(true);
boolean focused = super.requestFocus(direction, previouslyFocusedRect);
showSoftKeyboard();
if (getShowSoftInputOnFocus()) {
showSoftKeyboard();
}
return focused;
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -715,6 +715,12 @@ public void setBorderStyle(ReactEditText view, @Nullable String borderStyle) {
view.setBorderStyle(borderStyle);
}

@ReactProp(name = "showSoftInputOnFocus", defaultBoolean = true)
public void showKeyboardOnFocus(ReactEditText view, boolean showKeyboardOnFocus) {
view.setShowSoftInputOnFocus(showKeyboardOnFocus);
}


@ReactPropGroup(names = {
ViewProps.BORDER_WIDTH,
ViewProps.BORDER_LEFT_WIDTH,
Expand Down

0 comments on commit b476ca0

Please sign in to comment.