Skip to content

Commit

Permalink
feat: fix show soft input on focus behavior (#35244)
Browse files Browse the repository at this point in the history
Summary:
The `showSoftInputOnFocus` of `TextInput` is not working properly. When we set `showSoftInputOnFocus` to false and subsequently to `true`, it fails to open the keyboard, we have to re-focus on the input in order for the keyboard to show. It's expected that the keyboard will be opened as soon as  `showSoftInputOnFocus` becomes `true`. This happens on iOS only.
Reference in React Native doc: https://reactnative.dev/docs/textinput#showsoftinputonfocus.

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->

[iOS] [Fixed] - Fix issue where keyboard does not open when `TextInput` `showSoftInputOnFocus` changes from `false` to `true`

Pull Request resolved: #35244

Test Plan:
I've made a clean `create-react-native-app` repo to demonstrate this https://github.com/christianwen/reduced-rn-app.
Here's the steps:
1. Clone https://github.com/christianwen/reduced-rn-app
2. Run `yarn install`
3. Run `cd ios`, then `pod install`, then `cd ..`
4. Run `yarn ios`
5. See the text input on the top of the screen, it can be observed that the keyboard does not open because `showSoftInputOnFocus` is `false`, 3 seconds later it becomes `true` due to a `setTimeout` that is used
<img width="528" alt="Screenshot 2022-11-07 at 23 39 50" src="https://user-images.githubusercontent.com/21312517/200365369-a92fdea3-762c-4224-b463-7143b63329a7.png">

https://user-images.githubusercontent.com/21312517/200366099-db8626a6-1a31-4bfc-862c-2e37a8b35a3f.mov

However, it can be seen that the keyboard does not open even though `showSoftInputOnFocus` becomes `true`
6. Now add the change in this PR to `Libraries/Text/TextInput/RCTBaseTextInputView.m`
7. Run `yarn ios` again
8. Now verify the step 5 again, the keyboard will open automatically when `showSoftInputOnFocus` becomes `true`

https://user-images.githubusercontent.com/21312517/200363910-726716b1-e76d-420b-848d-a98747868db9.mp4

The reason why I created a fresh RN repo instead of using `rn-tester` app is because the `showSoftInputOnFocus` example is not working in `rn-tester` app for some reasons (it shows the keyboard even though `showSoftInputOnFocus` is `false` in the example).

Regarding the code, it's similar to the fix for `keyboardType` in 8baaacb.

<img width="924" alt="Screenshot 2022-11-07 at 23 36 41" src="https://user-images.githubusercontent.com/21312517/200364649-38e7ddc3-ddac-47c4-a72d-a38cf32e120c.png">

Reviewed By: cipolleschi

Differential Revision: D41274007

Pulled By: jacdebug

fbshipit-source-id: dbdf45194db85eeb0a2a4ed372f8c71f44983725
  • Loading branch information
christianwen authored and facebook-github-bot committed Nov 15, 2022
1 parent effbae5 commit 7425c24
Showing 1 changed file with 6 additions and 0 deletions.
6 changes: 6 additions & 0 deletions Libraries/Text/TextInput/RCTBaseTextInputView.m
Original file line number Diff line number Diff line change
Expand Up @@ -313,6 +313,12 @@ - (void)setShowSoftInputOnFocus:(BOOL)showSoftInputOnFocus
if (showSoftInputOnFocus) {
// Resets to default keyboard.
self.backedTextInputView.inputView = nil;

// Without the call to reloadInputViews, the keyboard will not change until the textInput field (the first
// responder) loses and regains focus.
if (self.backedTextInputView.isFirstResponder) {
[self.backedTextInputView reloadInputViews];
}
} else {
// Hides keyboard, but keeps blinking cursor.
self.backedTextInputView.inputView = [UIView new];
Expand Down

0 comments on commit 7425c24

Please sign in to comment.