feat(fabric): Pick the rest of TextInput changes #2727
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Summary: The multiline text input view on macOS needs its own view hierarchy, wrapping the RCTUITextView in a scroll view to support all the features offered by the React TextInput component. This diff adds a wrapper class for RCTUITextView that provides the appropriate view hierarchy while still supporting the text input protocols required for text input. The wrapper forwards all unimplemented methods to the RCTUITextView so that it can be used as a direct substitute for the RCTUITextView. This allows us to reduce the custom changes need for macOS in RCTTextInputComponentView while re-using all the logic in RCTUITextView. Test Plan: Tested later in this stack. Reviewers: shawndempsey, #rn-desktop Reviewed By: shawndempsey Differential Revision: https://phabricator.intern.facebook.com/D51962394 Tasks: T167538822, T157889591 Tags: uikit-diff
Summary: Add a `responder` property to support assigning the first responder to the actual textfield/textview if the view is wrapped or not. The wrapped text view already implements this property. This diff brings the same functionality to the text field and declares it on the common protocol. Test Plan: Tested later in this stack. Reviewers: shawndempsey, chpurrer, #rn-desktop Reviewed By: shawndempsey, chpurrer Differential Revision: https://phabricator.intern.facebook.com/D51962395 Tasks: T167538822, T157889591
Summary: This diff updates the core TextInput RN component to use the wrapped text view for multiline TextInput. Switching to `RCTWrappedTextView` enables correct `borderWidth` and `contentInsets` support for multi line text inputs while maintaining the same functionality for single line text input. Scrolling text views are also supported correctly, with vertical height dependent scrollers. Test Plan: - Build Zeratul with Fabric enabled. - Type in the search field to test the layout of the text contents - Type in the composer to test multi line support and the layout of the text contents | Before | After | |--| | https://pxl.cl/3Xrrx | https://pxl.cl/3Xrr9 | Reviewers: shawndempsey, #rn-desktop Reviewed By: shawndempsey Differential Revision: https://phabricator.intern.facebook.com/D51962396 Tasks: T167538822, T157889591
Summary: This diff propagates the View `enableFocusRing` property to the backing textfield/textview to correctly set up the NSTextField/NSScrollView with the latest provided property value for single and multiline TextInput components. Test Plan: - Run Zeratul with Fabric enabled - Focus the composer in a message thread - The blue focus ring should not show up around the composer | Before | After | |--| | https://pxl.cl/3XHP8 | {F1169320851} | Reviewers: shawndempsey, chpurrer, #rn-desktop Reviewed By: chpurrer Differential Revision: https://phabricator.intern.facebook.com/D52005858 Tasks: T167538822
Saadnajmi
changed the title
Summary: Pressing the escape key down in a TextInput on macOS will be captured on the native side as a cancel event. This diff adds support for sending the "Escape" key as a key pressed event and wires the delegate method of the backing text input to call the key press event handler with the correct payload. Test Plan: - Run Zeratul with Fabric enabled - Add a key press handler on the textfield logging the received data (e.g. on MDSTextInput) - Focus the textfield - Press the escape key - The key press handler should be called and print that the "Escape" key was pressed. https://pxl.cl/3XHR2 Reviewers: shawndempsey, #rn-desktop Reviewed By: shawndempsey Differential Revision: https://phabricator.intern.facebook.com/D52005857 Tasks: T167538822
Summary: This diff implements the scrollViewDidScroll delegate method call on the mutli line text input (`RCTWrappedTextView`). The text metrics are updated with the right values read directly from the emitting scroll view so that the TextInput would submit the right payload for scrolling multi line TextInput components at all times. Test Plan: - Run Zeratul with Fabric enabled - Log the onScroll callback data for TextInput used by the composer (e.g. MDSTextInput) - Type a message spanning over multiple lines in the composer until a scroll bar is visible - Scroll the composer contents - The logging shows the text metrics provided as payload for the onScroll handler. https://pxl.cl/3XHRl Reviewers: shawndempsey, chpurrer, #rn-desktop Reviewed By: chpurrer Differential Revision: https://phabricator.intern.facebook.com/D52005859 Tasks: T167538822
Summary: When text completions or special character symbols are displayed ahead of time, the content is present in the native text view attributed string. If a state update is applied, the cursor position will not be read as being at the end of the string while typing, which will shift the cursor position after the update. This diff disables native text view content updates while temporary context is displayed to fix the wrong cursor position updates. Test Plan: Run Zeratul with Fabric and type text in the message composer until macOS renders a text completion/suggestion. Keep typing and see if the cursor stays at the end of the string. | Before | After | |--| | https://pxl.cl/49PW4 | https://pxl.cl/49PWh | Reviewers: shawndempsey, #rn-desktop Reviewed By: shawndempsey Differential Revision: https://phabricator.intern.facebook.com/D52787094 Tasks: T174286406
Summary: This diff adds the macOS-only property to the TextInput component called `submitKeyEvents` which allows the user to provide key combinations that will trigger a submit action. This is being used to implement message sending on hitting the return key. Test Plan: Tested later in this stack Reviewers: shawndempsey, #rn-desktop Reviewed By: shawndempsey Subscribers: taskcreeper Differential Revision: https://phabricator.intern.facebook.com/D52860413
Summary: This diff implements the key down event processing to check if any of the provided submit key combinations were entered in the TextInput. If a match is found, the submit callback is triggered. Test Plan: Tested later in this stack. Reviewers: shawndempsey, #rn-desktop Reviewed By: shawndempsey Differential Revision: https://phabricator.intern.facebook.com/D52860412
Summary: This diff adds the macOS-only `clearTextOnSubmit` property for the TextInput component. When set to `true`, the TextInput will clear its content after a submit was triggered through the configured `submitKeyEvents` key combinations. Test Plan: - Run Zeratul with Fabric enabled and enter a message in the composer. - Submit the message by pressing the `Return` key. - Check that `Shift + Return` still works without submitting. https://pxl.cl/4bw3D Reviewers: shawndempsey, chpurrer, #rn-desktop Reviewed By: shawndempsey, chpurrer Differential Revision: https://phabricator.intern.facebook.com/D52860414
Summary: This diff adds support for the secure text entry mode of the single line TextInput component. The backing text field is switched for an extension of the NSSecureTextField on macOS. This was implemented on the single line text input implementation in Paper. This logic is now combined with the multi line text input on the RCTTextInputComponentView on Fabric. The secure text field uses a macro define to re-include the text field source files with minor changes, this to avoid code duplication. To support the inclusion magic happening here, the `import` statement of the text field header had to be converted to an `include` so that the macro-toggling-magic of the secure text field would work. Test Plan: - Run Zeratul with Fabric enabled and use the auth screen of Messenger to test the secure text entry with the password field. https://pxl.cl/4c2CD Reviewers: shawndempsey, #rn-desktop Reviewed By: shawndempsey Differential Revision: https://phabricator.intern.facebook.com/D52924481
…ng view
Summary: This diff adds the copy of the a11y attributes when switching the TextInput to the secure text entry which triggers the switch to a NSSecureTextField and runs the copy of the NSTextField attributes to the new backing text field.
Test Plan:
- Run Zeratul with Fabric enabled and inspect the Messenger password field on the auth screen using the Accessability Inspector to check that the attributes are passed down to the native text field.
{F1332886925}
Reviewers: shawndempsey, #rn-desktop
Reviewed By: shawndempsey
Differential Revision: https://phabricator.intern.facebook.com/D52924480
Summary:
**Context**
- TextInput focus prop was not wired up for Fabric
**Change**
- Focus the text input if `autofocus={true}`
Test Plan: Tested in top of stack
Reviewers: lefever, #rn-desktop
Reviewed By: lefever
Differential Revision: https://phabricator.intern.facebook.com/D54880714
Saadnajmi
changed the title
tido64
reviewed
Oct 13, 2025
...ges/react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm
Outdated
Show resolved
Hide resolved
...ges/react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm
Outdated
Show resolved
Hide resolved
...ges/react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm
Outdated
Show resolved
Hide resolved
...nderer/components/textinput/platform/ios/react/renderer/components/iostextinput/primitives.h
Show resolved
Hide resolved
.../components/textinput/platform/ios/react/renderer/components/iostextinput/propsConversions.h
Show resolved
Hide resolved
.../components/textinput/platform/ios/react/renderer/components/iostextinput/propsConversions.h
Outdated
Show resolved
Hide resolved
|
Can't seem to reopen.. will recreate |
Saadnajmi
commented
Oct 13, 2025
...ges/react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm
Outdated
Show resolved
Hide resolved
tido64
approved these changes
Oct 14, 2025
...ges/react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm
Outdated
Show resolved
Hide resolved
...ges/react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm
Outdated
Show resolved
Hide resolved
Co-authored-by: Tommy Nguyen <4123478+tido64@users.noreply.github.com>
Co-authored-by: Tommy Nguyen <4123478+tido64@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary:
Pick a bunch of assorted changes to TextInput that aren't neatly dividable.