microsoft / microsoft/react-native-windows
Fabric: Reconcile TextInput's focus APIs with View's focus APIs
Nobody has claimed this yet.
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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