From 7425c24cbe66ec743794b6ffc4cc1a653e821dde Mon Sep 17 00:00:00 2001 From: Tien Anh Nguyen Date: Tue, 15 Nov 2022 09:37:21 -0800 Subject: [PATCH] feat: fix show soft input on focus behavior (#35244) 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 [iOS] [Fixed] - Fix issue where keyboard does not open when `TextInput` `showSoftInputOnFocus` changes from `false` to `true` Pull Request resolved: https://github.com/facebook/react-native/pull/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 Screenshot 2022-11-07 at 23 39 50 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 https://github.com/facebook/react-native/commit/8baaacb66458dd706421fcbc1fc1934cd1ebbb94. Screenshot 2022-11-07 at 23 36 41 Reviewed By: cipolleschi Differential Revision: D41274007 Pulled By: jacdebug fbshipit-source-id: dbdf45194db85eeb0a2a4ed372f8c71f44983725 --- Libraries/Text/TextInput/RCTBaseTextInputView.m | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/Libraries/Text/TextInput/RCTBaseTextInputView.m b/Libraries/Text/TextInput/RCTBaseTextInputView.m index 04e5a49094ad37..7f2a6e6996366b 100644 --- a/Libraries/Text/TextInput/RCTBaseTextInputView.m +++ b/Libraries/Text/TextInput/RCTBaseTextInputView.m @@ -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];