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

Fix TextInput focus when inside a FocusZone #3849

Merged
merged 4 commits into from
Jan 29, 2025
Merged

Conversation

nakambo
Copy link
Collaborator

@nakambo nakambo commented Jan 29, 2025

Platforms Impacted

  • iOS
  • macOS
  • win32 (Office)
  • windows
  • android

Description of changes

When a TextInput is not inside a FocusZone, it properly participates in the key view loop in that Tab\Shift+Tab will place focus on the inner RCTUITextView, instead of the outer RCTBaseTextInputView subclass. This is due to overriding the canBecomeKeyView in that base class.

However, the FocusZone control does not look at that property -- instead it only considers canBecomeFirstResponder, as seen in #2329. Although it seems like the logical next step to use canBecomeKeyView in the FocusZone, that was previously done with #2267 but later reverted in #2322 since it broke things downstream. Instead, we'll make a compromise and leak some of the text input implementation details into the focus zone -- if we're considering focusing a subclass of RCTBaseTextInputView, we'll instead use the containing backedTextInputView.

Verification

Testing:

  • TI inside FZ is now properly focused (using the new case added to the FZ page)
  • Verified all other cases on the FZ page
  • Verified in the downstream scenario that prompted this investigation

Notes:

  • I noticed that Shift+Ctrl+Tab does not move focus out of the containing FZ, but that has been determined to be a pre-existing issue, and thus isn't being addressed in this change.

Pull request checklist

This PR has considered (when applicable):

  • Automated Tests
  • Documentation and examples
  • Keyboard Accessibility
  • Voiceover
  • Internationalization and Right-to-left Layouts

When a TextInput is not inside a FocusZone, it properly participates in the key view loop in that Tab\Shift+Tab will place focus on the inner `RCTUITextView`, instead of the outer `RCTBaseTextInputView` subclass. This is due to [overriding](https://github.com/microsoft/react-native-macos/blob/b7033b3513d98b20a08ec20abfe2b9bb712c68d4/packages/react-native/Libraries/Text/TextInput/RCTBaseTextInputView.mm#L1147C1-L1150C2) the `canBecomeKeyView` in that base class.

However, the FocusZone control does not look at that property -- instead it only considers `canBecomeFirstResponder`, as seen in #2329.  Although it seems like the logical next step to use `canBecomeKeyView` in the FocusZone, that was previously done with #2267 but later reverted in #2322 since it broke things downstream. Instead, we'll make a compromise and leak some of the text input implementation details into the focus zone -- if we're considering focusing a subclass of `RCTBaseTextInputView`, we'll instead use the containing `backedTextInputView`.

Testing:

* TI inside FZ is now properly focused (using the new case added to the FZ page)
* Verified all other cases on the FZ page
* Verified in the downstream scenario that prompted this investigation

Notes:

* I noticed that Shift+Ctrl+Tab does not move focus out of the containing FZ, but that has been determined to be a pre-existing issue, and thus isn't being addressed in this change.
@nakambo nakambo requested a review from Saadnajmi January 29, 2025 21:47
@nakambo nakambo requested a review from a team as a code owner January 29, 2025 21:47
@nakambo nakambo enabled auto-merge (squash) January 29, 2025 22:52
@nakambo nakambo merged commit d9ebc63 into main Jan 29, 2025
11 checks passed
@nakambo nakambo deleted the user/nakambo/ti-inside-fz branch January 30, 2025 00:34
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.

2 participants