Scroll list item remains in "pressed" state after scroll completes

[syedinaqvi]

trafficstars

Environment

Steps to Reproduce

(Write your steps here:)

1. Create a list, such as a FlatList with multiple items in it.
2. On a touch device scroll the list while touching and holding one list item
3. Once scroll is over touch and hold on another item and scroll again.

Expected Behavior

List to show only one item as selected/hovered. i.e., to get both onMouseEnter and onMouseLeave events.

Actual Behavior

We get onMouseEnter event when user touch/hold an item and start the scroll, but no onMouseLeave event when user touch somewhere else. This ends up leaving the item as selected when the scroll is completed.

react-native run-windows --logging

Reproducible Demo

This bug repro on several lists we are using in our two apps.

Additional context

(Write any other additional context that may help in root causing the issue.)

[chrisglein]

Potentially an issue with XAML with not getting mouse leave events as a result of scroll. Not sure if it's fixed or not.

[rozele]

@chrisglein - we implement onMouseEnter and onMouseLeave via PointerMoved events, rather than PointerEntered / PointerExited events.

I think these JS events (onMouseEnter / onMouseLeave) should not be firing at all for touch pointers (after all, it's not a mouse pointer being used). If we do want to support them as a general purpose "pointer enter" and "pointer leave" event, we likely need to add logic in the PointerReleased event callback to handle firing onMouseLeave events for any views that were "entered" by the same touch pointer and no longer have any other pointers active in them. I.e., here:

https://github.com/microsoft/react-native-windows/blob/main/vnext/Microsoft.ReactNative/Views/TouchEventHandler.cpp#L195