Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

patch RN to remove JS hack for selectTextOnFocus #3747

Open
wants to merge 4 commits into
base: main
Choose a base branch
from

Conversation

haileyok
Copy link
Member

@haileyok haileyok commented Apr 29, 2024

Why

Note: Let's see what feedback comes from facebook/react-native#44307 before merging this (or at least before releasing to prod)

There seems to be a bug in React Native's TextInput code when using selectTextOnFocus on iOS. After a brief investigation, I discovered that selectAll is called on the underlying UITextField whenever textInputDidBeginEditing is fired. However, it turns out that shortly after textInputDidBeginEditing is called, another method - reactFocus - is called on the view. Once reactFocus is called, the text selection is removed, and it appears that it never even happened at all.

This patch moves the selectAll call to be ran after the reactFocus call has finished. This results in the consistent behavior we expect when selecting the text.

To note, reactFocus is the method used on the native side whenever you call textInputRef.current?.focus(). reactFocus is also special to the RCTBaseTextInputView, so we know that this method is related to the focusing of the input.

As I stated in the readme for the patch, it is quite possible that the current hack fix would continue to work.

<TextInput
    onFocus={() => {
      if (Platform.OS === 'ios') {
        textInput.current?.setSelection(0, searchText.length)
      }
    }}
/>

It likely works, because by the time the onFocus event is received and we subsequently update the selection, reactFocus has also already been called. There very well could be situations where this is not true - note that the native code fires the onFocus event prior to reactFocus, so it is theoretically possible I believe for the event to be received and the JS selection to be called before reactFocus fires - although it's probably unlikely.

Test Plan

Build for iOS with this patch, and observe that the search input filed is properly highlighted whenever the input is focused.

Here is a video of the before and after:

Screen.Recording.2024-04-28.at.5.29.57.PM.mov

Copy link

render bot commented Apr 29, 2024

Copy link

github-actions bot commented Apr 29, 2024

The Pull Request introduced fingerprint changes against the base commit: 388c4f7

Fingerprint diff
[{"type":"dir","filePath":"patches","reasons":["patchPackage"],"hash":"05a64aa4b3986e71adab709ea189e318cb8032ed"}]

Generated by PR labeler 🤖

Copy link

github-actions bot commented Apr 29, 2024

Old size New size Diff
6.44 MB 6.44 MB -62 B (-0.00%)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant