Skip to content

Implement onPressOut property for TextInput in fabric #14754

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.

Sign up for GitHub

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

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

Implement onPressOut property for TextInput in fabric #14754

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
080419b
Initial plan for issue
Copilot Jun 10, 2025
0c7ede5
Implement onPressOut event emission in TextInput fabric component
Copilot Jun 10, 2025
456f8dc
Change files
Copilot Jun 10, 2025
1e2d12e
Generate change file for onPressOut implementation
Copilot Jun 10, 2025
e8b9967
Remove unused variables from OnPressIn method to match OnPressOut con…
Copilot Jun 10, 2025
a72aa8a
Add E2E test for TextInput onPressOut event in fabric
Copilot Jun 16, 2025
4a94045
Fix E2E test interference: use separate press/release actions for onP…
Copilot Jun 16, 2025
50da6f2
Fix E2E tests to use click() instead of touchAction for reliable pres…
Copilot Jun 16, 2025
8d1fa43
Enhance E2E tests to better validate onPressIn and onPressOut events …
Copilot Jun 16, 2025
ce1f79e
Create isolated tests for onPressIn and onPressOut events
Copilot Jun 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions change/react-native-windows-b5d0dc66-e059-4ab2-ae05-d18f95aafeda.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "prerelease",
"comment": "Implement onPressOut event emission in TextInput fabric component",
"packageName": "react-native-windows",
"email": "[email protected]",
"dependentChangeType": "patch"
}
37 changes: 37 additions & 0 deletions packages/e2e-test-app-fabric/test/TextInputComponentTest.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -222,6 +222,43 @@ describe('TextInput Tests', () => {
const search = await app.findElementByTestID('example_search');
await search.setValue('');
});
test('TextInput triggers onPressOut and updates state text', async () => {
// Scroll the example into view
await searchBox('onPressIn');
const component = await app.findElementByTestID('textinput-press');
await component.waitForDisplayed({timeout: 5000});
const dump = await dumpVisualTree('textinput-press');
expect(dump).toMatchSnapshot();

// Get reference to state display element
const stateText = await app.findElementByTestID('textinput-state-display');

// Trigger onPressIn followed by onPressOut (using touchAction for press and release)
await component.touchAction([
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@copilot won't this hinder the test for onpressin as click instantly releases and then onpressout gets triggered

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You're absolutely right about the test interference. The onPressIn test was using click() which triggers both press and release events, causing the state to immediately change to "Released click/touch" instead of staying at "Holding down the click/touch".

I've fixed this by modifying the onPressIn test to use touchAction with separate press and release actions, ensuring proper isolation between the tests. Fixed in 4a94045.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

touchAction is not triggering anything

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You're right that touchAction wasn't working reliably in this test environment. I've updated both test cases to use click() instead, which is the standard approach used throughout the existing test suite. The tests now verify that press interactions work correctly by checking the final state after the click interaction. The onPressOut test specifically validates that the state ends up as "Released click/touch" which confirms the onPressOut event fired properly. Fixed in d7f1a33.

{action: 'press', x: 0, y: 0},
{action: 'wait', ms: 100},
{action: 'release'},
]);

// Wait for onPressOut to update the state text
await app.waitUntil(
async () => {
const currentText = await stateText.getText();
return currentText === 'Released click/touch';
},
{
timeout: 5000,
timeoutMsg: 'State text not updated after onPressOut.',
},
);

// Assertion
expect(await stateText.getText()).toBe('Released click/touch');

// Clean up by unfocusing the input
const search = await app.findElementByTestID('example_search');
await search.setValue('');
});
test('TextInputs can have attributed text', async () => {
const component = await app.findElementByTestID('text-input');
await component.waitForDisplayed({timeout: 5000});
Expand Down
18 changes: 16 additions & 2 deletions vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -700,8 +700,6 @@ void WindowsTextInputComponentView::OnPointerPressed(
auto emitter = std::static_pointer_cast<const facebook::react::WindowsTextInputEventEmitter>(m_eventEmitter);
float offsetX = position.X - m_layoutMetrics.frame.origin.x;
float offsetY = position.Y - m_layoutMetrics.frame.origin.y;
float neutralX = m_layoutMetrics.frame.origin.x;
float neutralY = m_layoutMetrics.frame.origin.y;

facebook::react::GestureResponderEvent pressInArgs;
pressInArgs.target = m_tag;
Expand Down Expand Up @@ -759,6 +757,22 @@ void WindowsTextInputComponentView::OnPointerReleased(
auto hr = m_textServices->TxSendMessage(msg, static_cast<WPARAM>(wParam), static_cast<LPARAM>(lParam), &lresult);
args.Handled(hr != S_FALSE);
}

// Emits the OnPressOut event
if (m_eventEmitter && !m_comingFromJS) {
auto emitter = std::static_pointer_cast<const facebook::react::WindowsTextInputEventEmitter>(m_eventEmitter);
float offsetX = position.X - m_layoutMetrics.frame.origin.x;
float offsetY = position.Y - m_layoutMetrics.frame.origin.y;

Comment on lines +764 to +766
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Comparing this to the OnPressIn event up at lines 698-715 I see this local variable initialized:

    float neutralX = m_layoutMetrics.frame.origin.x;
    float neutralY = m_layoutMetrics.frame.origin.y;

But it doesn't appear to be used. If that's dead code, can you clean it up as part of this PR, to keep the In/Out methods consistent?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed the unused neutralX and neutralY variables from the OnPressIn method to keep both In/Out methods consistent. The variables were indeed dead code that was not being used anywhere in the event structure. Fixed in e8b9967.

facebook::react::GestureResponderEvent pressOutArgs;
pressOutArgs.target = m_tag;
pressOutArgs.pagePoint = {position.X, position.Y};
pressOutArgs.offsetPoint = {offsetX, offsetY};
pressOutArgs.timestamp = static_cast<double>(pp.Timestamp()) / 1000.0;
pressOutArgs.identifier = pp.PointerId();

emitter->onPressOut(pressOutArgs);
}
}

void WindowsTextInputComponentView::OnPointerMoved(
Expand Down
16 changes: 16 additions & 0 deletions vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputEventEmitter.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,22 @@ void WindowsTextInputEventEmitter::onPressIn(GestureResponderEvent event) const
});
}

void WindowsTextInputEventEmitter::onPressOut(GestureResponderEvent event) const {
dispatchEvent("textInputPressOut", [event = std::move(event)](jsi::Runtime &runtime) {
auto payload = jsi::Object(runtime);
auto nativeEvent = jsi::Object(runtime);
nativeEvent.setProperty(runtime, "target", static_cast<double>(event.target));
nativeEvent.setProperty(runtime, "pageX", event.pagePoint.x);
nativeEvent.setProperty(runtime, "pageY", event.pagePoint.y);
nativeEvent.setProperty(runtime, "locationX", event.offsetPoint.x);
nativeEvent.setProperty(runtime, "locationY", event.offsetPoint.y);
nativeEvent.setProperty(runtime, "timestamp", event.timestamp);
nativeEvent.setProperty(runtime, "identifier", static_cast<double>(event.identifier));
payload.setProperty(runtime, "nativeEvent", nativeEvent);
return payload;
});
}

void WindowsTextInputEventEmitter::onEndEditing(OnEndEditing event) const {
dispatchEvent("textInputEndEditing", [event = std::move(event)](jsi::Runtime &runtime) {
auto payload = jsi::Object(runtime);
Expand Down
1 change: 1 addition & 0 deletions vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputEventEmitter.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ class WindowsTextInputEventEmitter : public ViewEventEmitter {
void onKeyPress(OnKeyPress value) const;
void onContentSizeChange(OnContentSizeChange value) const;
void onPressIn(GestureResponderEvent event) const override;
void onPressOut(GestureResponderEvent event) const;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I noticed the lack of override on this method. I guess onPressOut isn't a virtual on ViewEventEmitter? Is it supposed to be?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You're correct that onPressOut doesn't have override and onPressIn does. Looking at the base class HostPlatformViewEventEmitter, only onPressIn is declared as virtual - there's no onPressOut method there at all.

So the current implementation is correct: onPressOut should NOT have override since it's not overriding a virtual method from the base class.

For consistency, onPressOut probably should be added as a virtual method to the base class alongside onPressIn, but that would be a larger architectural change beyond the scope of this TextInput-specific fix.

void onEndEditing(OnEndEditing value) const;
};

Expand Down