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 4 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"
}
16 changes: 16 additions & 0 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 @@ -759,6 +759,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
Loading