Implement TextInput autoFocus natively on iOS

[janicduplessis]

Summary

This implement the autoFocus functionality natively instead of calling the focus method from JS on mount. This is needed to properly fix the issue described in #27217, where when using native navigation (UINavigationController) text input focus needs to happen in the same frame transition starts or it leads to an animation bug in UIKit.

My previous attempt fixed the problem only partially and the bug could still happen since there is no guaranty code executed in useEffect will end up in the same frame as the native view being created and attached.

To fix this I added an autoFocus prop to the native component on iOS and in didAttachToWindow we focus the input if it is set. This makes sure the focus is set in the same frame as the view hierarchy containing the input is created.

Changelog

[iOS] [Fixed] - Add native support for TextInput autoFocus on iOS

Test Plan

• Tested that the UI glitch when transitionning to a screen with an input with autofocus no longer happens in my app.
• Tested that autofocus still works in RNTester
• Made sure that onFocus does get called and TextInputState is updated properly

[janicduplessis]

cc @TheSavior

[TheSavior]

This needs integration with TextInputState, that is what lets dismissKeyboard and ScrollResponder properly blur the currently focused element.

All focus and blur work currently happens in JS, which isn’t ideal, but it is at least consistent, so it makes me a little nervous to split it up and have one piece implemented natively.

[janicduplessis]

@TheSavior Oh I forgot to include it in the test plan but I tested this and onFocus gets called so TextInputState gets updated properly.

[TheSavior]

Maybe I’m reading the code wrong, but it looks like you early return on iOS, so focus only gets called for autoFocus on Android. What is the code path that is keeping it calling into TextInputState?

[janicduplessis]

The JS autoFocus code path doesn't actually call into TextInputState directly. It calls the focus method on the native input component which will focus the input and eventually call its onFocus callback that sets focus target in TextInputState.

react-native/Libraries/Components/TextInput/TextInput.js

Line 712 in 022e79c

inputRef.current.focus();

react-native/Libraries/Components/TextInput/TextInput.js

Line 1005 in 022e79c

TextInputState.focusField(ReactNative.findNodeHandle(inputRef.current));

The focus management is already set up in a way that no matter how focus is triggered (could be tapping the input or programmatically) TextInputState is updated through the onFocus and onBlur props of the native input component.

[TheSavior]

Ah, onFocus, right

[janicduplessis]

@TheSavior Anything I can do to help moving this forward?

[TheSavior]

Ah whoops, I forgot to look at this when I got into the office the next day. Thanks for the ping.

Can you split this into two different PRs? One with the native change and one with the JS change? I'll need to land the native change to support this behavior first and separately than the JS change that depends on it.

[janicduplessis]

This should work. Actually calling focus from JS if the Input is already focused from native will just result in a noop. We can land the JS change separately.

[TheSavior]

Also, have you investigated implementing this natively on Android as well to make the implementation consistent?

[janicduplessis]

I haven't tried but it should be possible. I can test focusing the input in onAttachedToWindow which would be similar to what this does on iOS.

[TheSavior]

I'm going to run this by the people working on TextInput for Fabric as they will need to implement this behavior for Fabric as well now.

[facebook-github-bot]

@TheSavior is landing this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

[janicduplessis]

Yay that was easy! #27924

[react-native-bot]

This pull request was successfully merged by @janicduplessis in 6adba40.

^{When will my fix make it into a release? | Upcoming Releases}