Fabric: Reconcile TextInput's focus APIs with View's focus APIs #11415
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
Problem Description
In RN core, TouchableWithoutFeedbacks get
onFocus
andonBlur
events, which means any native component we want to work with that needs to support it. The expectation is that the JS will respond totopFocus
andtopBlur
events fired from native code. Also, the Direct Manipulation APIs expect that all native components supportfocus()
andblur()
methods.However,
TextInput
s also get their own set ofonFocus
/onBlur
events andfocus()
/blur()
methods. In this case, the JS expectstopTextInputFocus
andtopTextInputBlur
events.For Paper, RNW implements the matching
topFocus
/topBlur
as bubbled events inViewManagerBase
, but the events only ever get raised byViewViewManager
, so onlyView
s get the functionality. Correspondingly,ViewViewManager
handlesfocus()
/blur()
methods forView
s.For
TextInput
s, RNW Paper implements thetopTextInputFocus
/topTextInputBlur
as direct events inTextInputViewManager
and thefocus()
/blur()
methods inTextInputShadowNode
. SoTextInput
s 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 andfocus()
/blur()
methods) inCompositionBaseComponentView
. 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 firingtopTextInputFocus
/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
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
The text was updated successfully, but these errors were encountered: