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] Implement selectTextOnFocus prop in TextInput #14412

Draft
wants to merge 7 commits into
base: main
Choose a base branch
from

Conversation

danielayala94
Copy link
Contributor

@danielayala94 danielayala94 commented Mar 10, 2025

Description

Type of Change

New feature.

Why

Implement selectTextOnFocus prop in TextInput. It is implemented in Paper; this PR brings the Fabric implementation.

Resolves #13133

What

Created a function that:

  • Selects the whole text when the TextInput is focused
  • Drops the selection when TextInput loses focus

The function is called in two places:

  • OnPointerReleased(), if the mouse left button was pressed, to select the text.
  • OnLostFocus(), to clear the selection.

Text selection will not occur if clearTextOnFocus prop is set to true. This is purely by design, as the RN documentation doesn't specify what the behavior should be. For reference, if both props are set to true, Android doesn't clear the text on focus and performs the selection, but iOS clears the text input.

Screenshots

selectTextOnFocus.mp4

Testing

Added e2e tests to TextInputComponentTest and two TextInput fields in playground, in both cases demonstrating the capabilities explained above.

Changelog

Yes

Implement selectTextOnFocus for TextInput in Fabric

Microsoft Reviewers: Open in CodeFlow

@danielayala94 danielayala94 added Area: TextInput Area: Fabric Support Facebook Fabric Area: Component Views New Architecture Broad category for issues that apply to the RN "new" architecture of Turbo Modules + Fabric Parity: Fabric vs. Paper RNW Fabric does not look or behave like RNW Paper Workstream: Component Parity Close the parity gap between RNW and RN for core RN components and their supporting APIs. labels Mar 10, 2025
@danielayala94 danielayala94 requested a review from a team as a code owner March 10, 2025 23:56
@acoates-ms
Copy link
Collaborator

Can we maybe just map selectTextOnFocus to ES_SAVESEL?
Turn on:
m_textServices->TxSendMessage(EM_SETOPTIONS, ECOOP_OR, ES_SAVESEL);
Turn off:
m_textServices->TxSendMessage(EM_SETOPTIONS, ECOOP_AND, ~ES_SAVESEL);

Not using onFocus means that we miss various other method of the textinput gaining focus. (Keyboarding, accessibility, programatic)

@danielayala94
Copy link
Contributor Author

Can we maybe just map selectTextOnFocus to ES_SAVESEL? Turn on: m_textServices->TxSendMessage(EM_SETOPTIONS, ECOOP_OR, ES_SAVESEL); Turn off: m_textServices->TxSendMessage(EM_SETOPTIONS, ECOOP_AND, ~ES_SAVESEL);

Not using onFocus means that we miss various other method of the textinput gaining focus. (Keyboarding, accessibility, programatic)

@acoates-ms I agree we should take care of the other ways to focus, not just the left mouse button. However, I tried both ES_SAVESEL/ECO_SAVESEL and neither seem to do anything.

@chrisglein chrisglein marked this pull request as draft April 3, 2025 18:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Area: Component Views Area: Fabric Support Facebook Fabric Area: TextInput New Architecture Broad category for issues that apply to the RN "new" architecture of Turbo Modules + Fabric Parity: Fabric vs. Paper RNW Fabric does not look or behave like RNW Paper Workstream: Component Parity Close the parity gap between RNW and RN for core RN components and their supporting APIs.
Projects
Status: No status
Development

Successfully merging this pull request may close these issues.

Implement selectTextOnFocus property for TextInput for fabric
3 participants