-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Simplify Flyout and Popup coordinate spaces (#11822)
* Simplify Flyout and Popup coordinate spaces We are seeing some issues with pointer event handling in XAML Islands apps. It appears that part of the issue has to do with the coordinate spaces not exactly lining up. It is too difficult to reason about the coordinate spaces when there are minor differences in measurement behavior. The coordinate spaces for TouchEventHandler and UIManager.measure need to line up exactly for Pressable to work as expected (as Pressable calls UIManager.measure to ensure the pointer is still in the hit box after a pointerMove event occurs). TouchEventHandler transforms the RoutedPointerEventArgs pointer position to the view passed to the TouchEventHandler: UIManager.measure measures against either the ReactRootView or the view corresponding to the last ancestor before a ShadowNode with IsWindowed set to true. This latter logic is the part in UIManager.measure is the part that complicates the reasoning about coordinate spaces. Even though it's designed to measure against the same native component, it's an extra (and arguably unnecessary) step to figuring out if the coordinate spaces match. It's much simpler to assume that all coordinate spaces are relative to the ReactRootView. This change should probably be marked as breaking, even though it could conceivably be considered a bug fix. Breaking in part because the X/Y positions returned from UIManager.measure will no longer be relative to the Flyout or Popup root. Also breaking because `pointerEvents` values for nodes above the Flyout will now impact the Flyout. For example: ``` <View pointerEvents="none"> <Flyout isOpen={true}> <Button title="Click Me" onPress={() => alert("Pressed")} /> </Flyout> </View> ``` Previously, the Flyout content would not respect the ancestors `pointerEvents` value. With this change, the pointer event will propagate through the entire tree, and respect any `"box-none"` or `"none"` props for ancestors in the main window. * Change files
- Loading branch information
Showing
7 changed files
with
26 additions
and
51 deletions.
There are no files selected for viewing
7 changes: 7 additions & 0 deletions
7
change/react-native-windows-4a09e136-8bbd-4b99-95ab-fdaed43e9292.json
This file contains 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
{ | ||
"type": "prerelease", | ||
"comment": "Simplify Flyout and Popup coordinate spaces", | ||
"packageName": "react-native-windows", | ||
"email": "email not defined", | ||
"dependentChangeType": "patch" | ||
} |
This file contains 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
This file contains 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
This file contains 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
This file contains 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
This file contains 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
This file contains 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