[Fabric] Implement the onPressIn property for the fabric implementation of TextInput #14480

HariniMalothu17 · 2025-04-03T22:00:50Z

Description

Type of Change

Bug fix (non-breaking change which fixes an issue)

Why

Implement the onPressIn property for the fabric implementation of TextInput.
This property was available in RNW Paper via TextInputViewManager

See https://reactnative.dev/docs/textinput#onpressin for details.

Resolves #13127

What

Implemented the onPressIn property for the fabric implementation of TextInput.

Screenshots

Recording.2025-04-04.025511.mp4

Testing

Tested using playground-composition App,
Added an alert prompt to the onPressIn event when the TextInput is pressed.
Tested using RNTesterFabric app

Changelog

Yes

Added a brief summary of onPressIn to use in the release notes for the next release.

Microsoft Reviewers: Open in CodeFlow

TatianaKapos · 2025-04-03T22:59:12Z

This is great! Can we also add an e2etest to make this change more stable in the future?

Instructions here: https://github.com/microsoft/react-native-windows/wiki/E2E-Testing-(Fabric)
Example PRs: https://github.com/microsoft/react-native-windows/pull/12746/files#diff-4e06b21930c2eef3b60c891c6816afb6379337dadef22b8f33e6667ecbba2f53 and https://github.com/microsoft/react-native-windows/pull/12771/files#diff-589ea5c45c3c5c3bf5e8ef865c8e86cc1c42719a07bbc316dc3e3d879954aa20

It also looks like rntester already has a TextInput you can refer too!

jonthysell

I think more than TextInput will require an onPressIn event and parts of this needs to be implemented up in HostPlatformViewEventEmitter rather than directly here.

For reference WindowsTextInputEventEmitter inherits from ViewEventEmitter which inherits from HostPlatformViewEventEmitter which inherits from BaseViewEventEmitter. HostPlatformViewEventEmitter is where we implement eventcode that multiple components will need.

jonthysell · 2025-04-09T19:03:49Z

vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputEventEmitter.cpp

@@ -66,5 +66,12 @@ void WindowsTextInputEventEmitter::onContentSizeChange(OnContentSizeChange event
    return textInputMetricsContentSizePayload(runtime, event);
  });
 }
+void WindowsTextInputEventEmitter::onPressIn(OnPressIn event) const {


The default version of this function should be implemented in HostPlatformViewEventEmitter and should dispatch to "pressIn".

Then, you should override that function here in WindowsTextInputEventEmitter to instead dispatch the event to "textInputPressIn".

See other comments for details.

Have updated the code .Please refer to the latest commit

jonthysell · 2025-04-09T19:04:05Z

vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputEventEmitter.h

@@ -41,11 +41,16 @@ class WindowsTextInputEventEmitter : public ViewEventEmitter {
    facebook::react::Size contentSize;
  };

+  struct OnPressIn {


This struct should instead be something like PressEvent and put it up in the HostPlatformViewEventEmitter for re-use elsewhere.

See https://reactnative.dev/docs/pressevent for the other fields the event should have in JS - I'm not sure if some (all?) of these need to be implemented in native code (some may be added in JS). You might need to update your test to display the event and verify what's present.

See other comments for details.

Have updated the code .Please refer to the latest commit

jonthysell · 2025-04-09T19:04:35Z

vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputEventEmitter.h

  void onChange(OnChange value) const;
  void onSelectionChange(const OnSelectionChange &value) const;
  void onSubmitEditing(OnSubmitEditing value) const;
  void onKeyPress(OnKeyPress value) const;
  void onContentSizeChange(OnContentSizeChange value) const;
+  void onPressIn(OnPressIn value) const;


This should be implemented as a virtual fucntion in HostPlatformViewEventEmitter for re-use elsewhere.

See other comments for details.

Have updated the code .Please refer to the latest commit

jonthysell · 2025-04-09T19:47:18Z

vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp

@@ -659,6 +659,14 @@ void WindowsTextInputComponentView::OnPointerPressed(
    auto hr = m_textServices->TxSendMessage(msg, static_cast<WPARAM>(wParam), static_cast<LPARAM>(lParam), &lresult);
    args.Handled(hr != S_FALSE);
  }
+
+  // Implements OnPressIn event


This is probably okay here for now, but it might need to be moved up into a more common place too, like in ComponentView.h

The updates have been made in the same file for now as it is implemented under PointerPressed

anupriya13 · 2025-04-14T04:28:09Z

@HariniMalothu17 @TatianaKapos I have added E2EFabricTestApp test cases here for TextInput #14461

TatianaKapos · 2025-04-14T18:00:40Z

@anupriya13 @HariniMalothu17 we will need to bring those changes in and make sure this PR changes that test.

anupriya13 · 2025-04-15T03:16:04Z

@anupriya13 @HariniMalothu17 we will need to bring those changes in and make sure this PR changes that test.

Fixing #14461 might some time. @HariniMalothu17 please add a new test case for this one.

anupriya13

Please add E2EFabric test case

acoates-ms · 2025-04-16T19:00:04Z

vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputEventEmitter.cpp

@@ -67,4 +67,20 @@ void WindowsTextInputEventEmitter::onContentSizeChange(OnContentSizeChange event
  });
 }

+void WindowsTextInputEventEmitter::onPressIn(const PressEvent &event) const {
+  dispatchEvent("textInputPressIn", [event](jsi::Runtime &runtime) {


Try making this event = std::move(event). Otherwise you are capturing a reference to an object that is going to go away. The dispatchEvent method will push things to the JS thread.

chiaramooney · 2025-04-21T18:09:14Z

packages/e2e-test-app-fabric/test/TextInputComponentTest.test.ts

+  test('TextInput triggers onPressIn and updates state text', async () => {
+    // Find the TextInput component and trigger the onPressIn event
+    const input = await app.findElementByTestID('textinput-press');
+    await input.click(); // This triggers the onPressIn event


Yes you'll need to search in the example search bar to make sure this component is visible before clicking. I would add this function (

react-native-windows/packages/e2e-test-app-fabric/test/ViewComponentTest.test.ts

Line 24 in ba87750

const searchBox = async (input: string) => {

) to TextInputComponentTest. This method allows you to pass in a string with a few keys for the sample title and it will search in the search bar for it.

This should fix the click issue

Updated.Please refer to the latest commit

Harini Malothu added 2 commits April 4, 2025 03:22

Implemented OnPressIn event for textinput

3e4e2d9

Change files

290a04f

HariniMalothu17 requested a review from a team as a code owner April 3, 2025 22:00

HariniMalothu17 changed the title ~~User/hmalothu/implement on press in~~ Implement the onPressIn property for the fabric implementation of TextInput Apr 3, 2025

HariniMalothu17 marked this pull request as draft April 3, 2025 22:18

HariniMalothu17 marked this pull request as ready for review April 3, 2025 22:24

HariniMalothu17 self-assigned this Apr 3, 2025

HariniMalothu17 changed the title ~~Implement the onPressIn property for the fabric implementation of TextInput~~ [Fabric] Implement the onPressIn property for the fabric implementation of TextInput Apr 3, 2025

HariniMalothu17 assigned TatianaKapos and unassigned HariniMalothu17 Apr 3, 2025

HariniMalothu17 added API: Completion 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 enhancement labels Apr 3, 2025

HariniMalothu17 requested review from sharath2727, jonthysell, acoates-ms and chiaramooney April 3, 2025 22:32

Merge branch 'main' into user/hmalothu/ImplementOnPressIn

b82eae1

jonthysell requested changes Apr 9, 2025

View reviewed changes

microsoft-github-policy-service bot added the Needs: Author Feedback The issue/PR needs activity from its author (label drives bot activity) label Apr 9, 2025

jonthysell self-requested a review April 10, 2025 23:10

anupriya13 self-requested a review April 14, 2025 04:28

anupriya13 requested changes Apr 15, 2025

View reviewed changes

Temp commit-Implementation of PressEvent in HostPlatform

88d9fff

microsoft-github-policy-service bot removed the Needs: Author Feedback The issue/PR needs activity from its author (label drives bot activity) label Apr 16, 2025

acoates-ms reviewed Apr 16, 2025

View reviewed changes

Temp

c38795e

chiaramooney reviewed Apr 21, 2025

View reviewed changes

Harini Malothu added 2 commits April 24, 2025 19:04

Updated the test file

b9da600

merged main

f8a64db

HariniMalothu17 requested a review from chiaramooney April 24, 2025 14:31

HariniMalothu17 marked this pull request as draft April 24, 2025 15:23

Fixed lint issues and updated snapshots

f82ffe1

HariniMalothu17 marked this pull request as ready for review April 24, 2025 15:48

Updated snapshotPages file

b4d8706

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Fabric] Implement the onPressIn property for the fabric implementation of TextInput #14480

[Fabric] Implement the onPressIn property for the fabric implementation of TextInput #14480

HariniMalothu17 commented Apr 3, 2025 •

edited

Loading

TatianaKapos commented Apr 3, 2025

jonthysell left a comment

jonthysell Apr 9, 2025

HariniMalothu17 Apr 24, 2025

jonthysell Apr 9, 2025

HariniMalothu17 Apr 24, 2025

jonthysell Apr 9, 2025

HariniMalothu17 Apr 24, 2025

jonthysell Apr 9, 2025

HariniMalothu17 Apr 24, 2025

anupriya13 commented Apr 14, 2025 •

edited

Loading

TatianaKapos commented Apr 14, 2025

anupriya13 commented Apr 15, 2025

anupriya13 left a comment

acoates-ms Apr 16, 2025

HariniMalothu17 Apr 24, 2025

chiaramooney Apr 21, 2025

HariniMalothu17 Apr 24, 2025

[Fabric] Implement the onPressIn property for the fabric implementation of TextInput #14480

Are you sure you want to change the base?

[Fabric] Implement the onPressIn property for the fabric implementation of TextInput #14480

Conversation

HariniMalothu17 commented Apr 3, 2025 • edited Loading

Description

Type of Change

Why

What

Screenshots

Testing

Changelog

Microsoft Reviewers: Open in CodeFlow

TatianaKapos commented Apr 3, 2025

jonthysell left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

anupriya13 commented Apr 14, 2025 • edited Loading

TatianaKapos commented Apr 14, 2025

anupriya13 commented Apr 15, 2025

anupriya13 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

HariniMalothu17 commented Apr 3, 2025 •

edited

Loading

anupriya13 commented Apr 14, 2025 •

edited

Loading