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

Fabric: Reconcile TextInput's focus APIs with View's focus APIs #11415

Open
jonthysell opened this issue Mar 22, 2023 · 0 comments
Open

Fabric: Reconcile TextInput's focus APIs with View's focus APIs #11415

jonthysell opened this issue Mar 22, 2023 · 0 comments
Assignees
Labels
Area: Fabric Support Facebook Fabric Area: Focus Area: TextInput enhancement New Architecture Broad category for issues that apply to the RN "new" architecture of Turbo Modules + Fabric Workstream: Component Parity Close the parity gap between RNW and RN for core RN components and their supporting APIs.
Milestone

Comments

@jonthysell
Copy link
Contributor

jonthysell commented Mar 22, 2023

Problem Description

In RN core, TouchableWithoutFeedbacks get onFocus and onBlur events, which means any native component we want to work with that needs to support it. The expectation is that the JS will respond to topFocus and topBlur events fired from native code. Also, the Direct Manipulation APIs expect that all native components support focus() and blur() methods.

However, TextInputs also get their own set of onFocus/onBlur events and focus()/blur() methods. In this case, the JS expects topTextInputFocus and topTextInputBlur events.

For Paper, RNW implements the matching topFocus/topBlur as bubbled events in ViewManagerBase, but the events only ever get raised by ViewViewManager, so only Views get the functionality. Correspondingly, ViewViewManager handles focus()/blur() methods for Views.

For TextInputs, RNW Paper implements the topTextInputFocus/topTextInputBlur as direct events in TextInputViewManager and the focus()/blur() methods in TextInputShadowNode. So TextInputs report both sets of events (View as bubbled, TextInput as direct) but only ever raise the TextInput events. Also, TextInput maintains control of the methods.

Now for Fabric (as of #11276 and #11323), RNW implements everything (topFocus/topBlur events and focus()/blur() methods) in CompositionBaseComponentView. Which means all components get the View versions.

So now TextInput is no longer handling focus()/blur() methods on its own (which may be okay?) but it's also not firing topTextInputFocus/topTextInputBlur events anymore. Will this affect how events propagate (since in Paper the View versions were bubbling, while TextInput was direct) but in Fabric it seems like it's all bubbling?

Steps To Reproduce

Found this discrepancy / change while trying to reconcile Fabric component parity progress.

Expected Results

No response

CLI version

npx react-native -v

Environment

npx react-native info

Target Platform Version

None

Target Device(s)

No response

Visual Studio Version

None

Build Configuration

None

Snack, code example, screenshot, or link to a repository

No response

@jonthysell jonthysell added bug Area: Fabric Support Facebook Fabric labels Mar 22, 2023
@microsoft-github-policy-service microsoft-github-policy-service bot added the Needs: Triage 🔍 New issue that needs to be reviewed by the issue management team (label applied by bot) label Mar 22, 2023
@chrisglein chrisglein added enhancement Area: TextInput Area: Focus and removed bug Needs: Triage 🔍 New issue that needs to be reviewed by the issue management team (label applied by bot) labels Mar 23, 2023
@chrisglein chrisglein added this to the 0.73 milestone Mar 23, 2023
@TatianaKapos TatianaKapos modified the milestones: 0.73, Backlog Nov 7, 2023
@jonthysell jonthysell added the New Architecture Broad category for issues that apply to the RN "new" architecture of Turbo Modules + Fabric label Mar 7, 2024
@chiaramooney chiaramooney added the Workstream: Component Parity Close the parity gap between RNW and RN for core RN components and their supporting APIs. label Oct 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Area: Fabric Support Facebook Fabric Area: Focus Area: TextInput enhancement New Architecture Broad category for issues that apply to the RN "new" architecture of Turbo Modules + Fabric Workstream: Component Parity Close the parity gap between RNW and RN for core RN components and their supporting APIs.
Projects
Status: No status
Development

No branches or pull requests

4 participants