microsoft / microsoft/react-native-windows

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

Open
#11,415 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Area: Fabric Area: Focus Area: TextInput enhancement New Architecture Workstream: Component Parity
Dominant language
C++
Stars
17.3k
Forks
1.2k
Avg merge
1d 13h
Merged PRs (30d)
33

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Compare the focus event and method handling in ViewManagerBase, ViewViewManager, TextInputViewManager, TextInputShadowNode, and CompositionBaseComponentView. Trace how Paper and Fabric propagate the View and TextInput events, then determine the intended parity and what behavior should be covered before making a change.

Written by the indexing model from the issue text.

Assessment

Tech stack
cpp, react-native
Domain
desktop, frontend
Issue type
Bug
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.