Repository navigation
Allow pointer events on selectable Text - #7813
Merged
Merged
Conversation
Eric Rozell (rozele)
force-pushed
the
issue7812
branch
from
May 20, 2021 16:23
7d6097b to
587e6c9
Compare
Contributor
Author
|
Here is a recording of the example added to RNTester: playground.2021-05-20.12-27-16.mp4See the issue for "before". |
Eric Rozell (rozele)
force-pushed
the
issue7812
branch
from
May 20, 2021 16:29
56080ad to
f3a7745
Compare
Eric Rozell (rozele)
force-pushed
the
issue7812
branch
from
July 3, 2021 18:47
6d8732f to
8f81402
Compare
Eric Rozell (rozele)
force-pushed
the
issue7812
branch
2 times, most recently
from
July 3, 2021 20:04
bc1ef3a to
86dfb2d
Compare
Contributor
|
/azp run |
Contributor
|
Azure Pipelines successfully started running 1 pipeline(s). |
Eric Rozell (rozele)
added a commit
to rozele/react-native-windows
that referenced
this pull request
Jul 29, 2021
We had previously created a custom component called HyperlinkTextViewManager that derived from VirtualTextViewManager to enable focus on pressable text, get the correct cursor behavior for pressable text, and to work around the issue with text hit testing that is being addressed in microsoft#7553). Rather than adding a new component that has no meaning on other platforms, we can use Hyperlink when virtual text meets certain conditions. This is really just a proposal for now, we should discuss if this change is warranted and, if so, under what conditions the Span should be swapped out for a Hyperlink. Please note this diff is dependent on microsoft#7553 and microsoft#7813 as we want to use the TouchEventHandler implementation to handle clicks in a way that they leverage the existing bubble / capture mechanisms of React Native. Also, the Hyperlink::Click event does not given you important details like the pointer position (see microsoft/microsoft-ui-xaml#4730). Remaining TODOs are: 1. Enable handled keyboard events on Hyperlink to flow so `usePressability` can handle keyboard invocation events. 2. Decide under what conditions we want to swap Span with Hyperlink. This PR uses `accessibilityRole` settings as an example, but we could also send an `isPressable` prop. 3. Add focus-related props to virtual text, so Hyperlink can set properties like TabIndex, TabStop, and UseSystemFocusVisuals. One remaining bit is how to enable "handled" keyboard events (as the `Enter` and `Space` keys are handled by Hyperlink component
6 of 7 tasks
Eric Rozell (rozele)
force-pushed
the
issue7812
branch
from
August 3, 2021 15:18
86dfb2d to
6497f9c
Compare
Eric Rozell (rozele)
force-pushed
the
issue7812
branch
2 times, most recently
from
August 3, 2021 17:32
f7051a5 to
04ae3d0
Compare
Eric Rozell (rozele)
added a commit
to rozele/react-native-windows
that referenced
this pull request
Aug 3, 2021
We had previously created a custom component called HyperlinkTextViewManager that derived from VirtualTextViewManager to enable focus on pressable text, get the correct cursor behavior for pressable text, and to work around the issue with text hit testing that is being addressed in microsoft#7553). Rather than adding a new component that has no meaning on other platforms, we can use Hyperlink when virtual text meets certain conditions. This is really just a proposal for now, we should discuss if this change is warranted and, if so, under what conditions the Span should be swapped out for a Hyperlink. Please note this diff is dependent on microsoft#7553 and microsoft#7813 as we want to use the TouchEventHandler implementation to handle clicks in a way that they leverage the existing bubble / capture mechanisms of React Native. Also, the Hyperlink::Click event does not given you important details like the pointer position (see microsoft/microsoft-ui-xaml#4730). Remaining TODOs are: 1. Enable handled keyboard events on Hyperlink to flow so `usePressability` can handle keyboard invocation events. 2. Decide under what conditions we want to swap Span with Hyperlink. This PR uses `accessibilityRole` settings as an example, but we could also send an `isPressable` prop. 3. Add focus-related props to virtual text, so Hyperlink can set properties like TabIndex, TabStop, and UseSystemFocusVisuals. One remaining bit is how to enable "handled" keyboard events (as the `Enter` and `Space` keys are handled by Hyperlink component
Eric Rozell (rozele)
force-pushed
the
issue7812
branch
2 times, most recently
from
August 3, 2021 21:33
9281d08 to
92624a0
Compare
Eric Rozell (rozele)
force-pushed
the
issue7812
branch
4 times, most recently
from
August 25, 2021 14:41
86a4890 to
6f911e3
Compare
Contributor
Author
|
Wait on this until #8495 lands, so we can use the OnPointerCaptureLost virtual method on ViewManagerBase to prevent cancellation due to PointerCaptureLost event. |
5 tasks done
Eric Rozell (rozele)
marked this pull request as draft
August 31, 2021 21:20
Eric Rozell (rozele)
force-pushed
the
issue7812
branch
from
September 1, 2021 14:45
6f911e3 to
6474426
Compare
Eric Rozell (rozele)
force-pushed
the
issue7812
branch
3 times, most recently
from
September 9, 2021 01:56
325df7a to
90cde04
Compare
Eric Rozell (rozele)
force-pushed
the
issue7812
branch
2 times, most recently
from
September 30, 2021 15:00
87e160c to
ce4bde0
Compare
Eric Rozell (rozele)
marked this pull request as ready for review
September 30, 2021 15:02
Eric Rozell (rozele)
force-pushed
the
issue7812
branch
2 times, most recently
from
September 30, 2021 15:07
56e1527 to
3034986
Compare
When TextBlock::IsTextSelectionEnabled is set to true, pointer events are canceled because the events are always marked as handled by the TextBlock, thus the events never reach the React Native root view. This change subscribes a TouchEventHandler to Text when the `selectable` prop is set to true, and also conditionally fires the `onTouchEnd` event when PointerCaptureLost fires when text is *not* selected as a result of the pointer events (e.g., click-and-drag or the second click of a double click). This allows us to create `onPress` callbacks that mimic the behavior of the XAML hyperlink component. In order for the correct page layout dimensions to be reported, we also need to provide the root view to TouchEventHandler. Fixes microsoft#7812
Eric Rozell (rozele)
force-pushed
the
issue7812
branch
from
September 30, 2021 15:45
3034986 to
1af10cf
Compare
… opposed to `onTouchCancel`.
Eric Rozell (rozele)
force-pushed
the
issue7812
branch
from
October 4, 2021 17:07
a58f0a7 to
6a3e8fc
Compare
Nick Gerleman (NickGerleman)
approved these changes
Oct 8, 2021
Contributor
|
Fixes #7954 |
Closed
Contributor
|
Eric Rozell (@rozele) would you like me to rebase this? |
Contributor
Author
|
Thanks for rebasing Nick Gerleman (@NickGerleman)! Are you sure this fixes #7954? This didn't add anything to support onPressIn/onPressOut, just made it so selectable text could respond to pointer events. |
Member
|
Eric Rozell (@rozele) Nick Gerleman (@NickGerleman) was this prematurely merged/closed? |
|
It does look like this was prematurely merged/closed. As of right now, onpressin/out is still not supported. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
When TextBlock::IsTextSelectionEnabled is set to true, pointer events are canceled because the events are always marked as handled by the TextBlock, thus the events never reach the React Native root view. This change subscribes a TouchEventHandler to Text when the
selectableprop is set to true, and also modifies the TouchEventHandler to conditionally fireonTouchCancelevent only when text is selected as a result of the pointer events (e.g., click-and-drag or the second click of a double click). This allows us to createonPresscallbacks that mimic the behavior of the XAML hyperlink component. In order for the correct page layout dimensions to be reported, we also need to walk the tree to find the root XAML view. This was set up conditionally for only selectable Text as walking the tree to the root for Flyout (which also subscribes it's own TouchEventHandler) seems to break press events.Fixes #7812
Microsoft Reviewers: Open in CodeFlow