Allow pointer events on selectable Text#7813
Merged
Merged
Conversation
Contributor
Author
|
Here is a recording of the example added to RNTester: playground.2021-05-20.12-27-16.mp4See the issue for "before". |
asklar
reviewed
May 20, 2021
rectified95
reviewed
May 28, 2021
rozele
commented
Jul 3, 2021
rozele
force-pushed
the
issue7812
branch
2 times, most recently
from
bc1ef3a to
86dfb2d
Compare
Contributor
|
/azp run |
Contributor
|
Azure Pipelines successfully started running 1 pipeline(s). |
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
7 tasks
rozele
commented
Aug 3, 2021
rozele
force-pushed
the
issue7812
branch
2 times, most recently
from
f7051a5 to
04ae3d0
Compare
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
rozele
force-pushed
the
issue7812
branch
2 times, most recently
from
9281d08 to
92624a0
Compare
rozele
commented
Aug 13, 2021
rozele
force-pushed
the
issue7812
branch
4 times, most recently
from
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
rozele
force-pushed
the
issue7812
branch
3 times, most recently
from
325df7a to
90cde04
Compare
rozele
force-pushed
the
issue7812
branch
2 times, most recently
from
87e160c to
ce4bde0
Compare
rozele
force-pushed
the
issue7812
branch
2 times, most recently
from
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
… opposed to `onTouchCancel`.
NickGerleman
approved these changes
Oct 8, 2021
Contributor
|
Fixes #7954 |
Closed
Contributor
|
@rozele would you like me to rebase this? |
Contributor
Author
|
Thanks for rebasing @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
|
@rozele @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