fix(react-positioning): improve safe zone hit testing - #36708
Open
JM (Yakubko) wants to merge 3 commits into
Open
JM (Yakubko) wants to merge 3 commits into
JM (Yakubko) wants to merge 3 commits into
Conversation
Reduce the safe zone to the container edges facing the pointer and update SVG geometry imperatively to avoid rerenders during pointer movement. Add focused geometry coverage, update the debug story, and include a patch change file.
Copilot started reviewing on behalf of
Dmytro Kirpa (dmytrokirpa)
September 8, 2026 13:12
View session
Contributor
There was a problem hiding this comment.
🟢 Approval recommended
The implementation and tests are sound; only a non-blocking reversed metric in the PR description needs correction.
Pull request overview
Improves safe-zone hit testing while eliminating React rerenders during pointer movement.
Changes:
- Replaces overlapping triangles with one directional polygon.
- Updates SVG geometry imperatively and clips only the target.
- Adds directional geometry tests and refreshes the debug story.
Merge confidence: 100/100. One non-blocking PR-description metric appears reversed.
File summaries
| File | Description |
|---|---|
UseSafeZoneAreaDefault.stories.tsx |
Makes debug mode configurable. |
SafeZoneArea.tsx |
Implements imperative polygon updates. |
SafeZoneArea.styles.ts |
Renames polygon styles. |
getSafeZonePoints.ts |
Computes facing container edges. |
getSafeZonePoints.test.ts |
Covers eight pointer directions. |
computeOutsideClipPath.ts |
Clips only the target rectangle. |
computeOutsideClipPath.test.ts |
Updates clipping expectations. |
SafeZoneArea.test.tsx.snap |
Updates rendered SVG snapshots. |
| Change file | Records the positioning bug fix. |
Review details
- Files reviewed: 9/9 changed files
- Comments generated: 1
- Review effort level: Balanced
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Marat Abdullin (mshoho)
approved these changes
Sep 8, 2026
📊 Bundle size report
Unchanged fixtures
|
|
Pull request demo site: URL |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| @@ -0,0 +1,7 @@ | |||
| { | |||
There was a problem hiding this comment.
🕵🏾♀️ visual changes to review in the Visual Change Report
vr-tests-react-components/Positioning 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Positioning.Positioning end.chromium.png | 149 | Changed |
| vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png | 618 | Changed |
vr-tests-react-components/ProgressBar converged 3 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - High Contrast.default.chromium.png | 159 | Changed |
| vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - Dark Mode.default.chromium.png | 81 | Changed |
| vr-tests-react-components/ProgressBar converged.Indeterminate + thickness.default.chromium.png | 27 | Changed |
vr-tests-react-components/TagPicker 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/TagPicker.disabled - Dark Mode.disabled input hover.chromium.png | 658 | Changed |
| vr-tests-react-components/TagPicker.disabled.disabled input hover.chromium.png | 677 | Changed |
There were 2 duplicate changes discarded. Check the build logs for more information.
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
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.
Previous Behavior
useSafeZoneArearendered four overlapping SVG triangles around the positioned container. Their geometry was stored in React state, causing the component to rerender repeatedly during pointer movement.The generated safe zone could also cover more area than necessary because it included every container edge instead of only the edges facing the pointer.
useSafeZoneAreais used by the Fluent UI ReactMenuand can also be used withPopoverto preserve the open state while the pointer travels from the trigger to the positioned surface.New Behavior
MenuandPopover.Browser Performance Comparison
Captured using the same scenario, browser version, recording duration, and pointer movement.
Testing
yarn nx run react-positioning:testyarn nx run react-positioning:e2ereact-positioninglint, type-check, and format checks passed.react-positioning-storieslint, type-check, and format checks passed.Change File
Includes a patch change file for
@fluentui/react-positioning.