Skip to content

fix(react-popover): only close on focus escape when focus was inside … - #36440

Open
petdud wants to merge 2 commits into
microsoft:masterfrom
petdud:fix/popover-close-on-focus-only-when-inside
Open

fix(react-popover): only close on focus escape when focus was inside …#36440
petdud wants to merge 2 commits into
microsoft:masterfrom
petdud:fix/popover-close-on-focus-only-when-inside

Conversation

@petdud

@petdud petdud commented Jul 23, 2026

Copy link
Copy Markdown
Contributor

…the surface

The focusin dismiss handler added for trapFocus popovers previously closed the popover on any focus landing outside the surface/trigger, even when focus had never entered the popover. This regressed consumers (e.g. Editor SDK's AutoCorrectCard / CritiqueCard) that intentionally keep focus on an external input via unstable_disableAutoFocus: a programmatic re-focus of that external element dismissed the popover mid-interaction.

Now the popover only dismisses on a genuine inside -> outside focus transition, preserving the original refocus bugfix while leaving popovers open when focus was never inside them.

Previous Behavior

New Behavior

Related Issue(s)

  • Fixes #

@petdud
petdud requested a review from a team as a code owner July 23, 2026 20:53
…the surface

The focusin dismiss handler added for trapFocus popovers previously closed
the popover on any focus landing outside the surface/trigger, even when focus
had never entered the popover. This regressed consumers (e.g. Editor SDK's
AutoCorrectCard / CritiqueCard) that intentionally keep focus on an external
input via unstable_disableAutoFocus: a programmatic re-focus of that external
element dismissed the popover mid-interaction.

Now the popover only dismisses on a genuine inside -> outside focus transition,
preserving the original refocus bugfix while leaving popovers open when focus
was never inside them.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 3f764f36-5770-4331-9c29-e96b9b4cf08c
@petdud
petdud force-pushed the fix/popover-close-on-focus-only-when-inside branch from 9583a54 to f47f34f Compare July 23, 2026 20:56
@github-actions

github-actions Bot commented Jul 23, 2026

Copy link
Copy Markdown

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-charts
AreaChart
405.498 kB
126.693 kB
405.562 kB
126.716 kB
64 B
23 B
react-charts
DeclarativeChart
757.03 kB
222.174 kB
757.094 kB
222.19 kB
64 B
16 B
react-charts
DonutChart
316.331 kB
97.48 kB
316.395 kB
97.502 kB
64 B
22 B
react-charts
FunnelChart
307.731 kB
94.247 kB
307.795 kB
94.27 kB
64 B
23 B
react-charts
GanttChart
388.63 kB
121.146 kB
388.694 kB
121.168 kB
64 B
22 B
react-charts
GaugeChart
315.679 kB
96.866 kB
315.743 kB
96.889 kB
64 B
23 B
react-charts
GroupedVerticalBarChart
396.706 kB
123.925 kB
396.77 kB
123.951 kB
64 B
26 B
react-charts
HeatMapChart
390.764 kB
122.19 kB
390.828 kB
122.212 kB
64 B
22 B
react-charts
HorizontalBarChart
296.007 kB
89.967 kB
296.071 kB
89.994 kB
64 B
27 B
react-charts
LineChart
416.846 kB
129.822 kB
416.91 kB
129.849 kB
64 B
27 B
react-charts
PolarChart
344.492 kB
107.638 kB
344.556 kB
107.661 kB
64 B
23 B
react-charts
SankeyChart
212.389 kB
68.178 kB
212.453 kB
68.199 kB
64 B
21 B
react-charts
ScatterChart
396.172 kB
123.857 kB
396.236 kB
123.878 kB
64 B
21 B
react-charts
VerticalBarChart
433.164 kB
128.841 kB
433.228 kB
128.863 kB
64 B
22 B
react-charts
VerticalStackedBarChart
402.724 kB
125.355 kB
402.788 kB
125.372 kB
64 B
17 B
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
226.026 kB
68.049 kB
226.09 kB
68.071 kB
64 B
22 B
react-components
react-components: entire library
1.294 MB
326.152 kB
1.294 MB
326.173 kB
64 B
21 B
react-popover
Popover
125.502 kB
40.442 kB
125.566 kB
40.458 kB
64 B
16 B
react-teaching-popover
TeachingPopover
100.694 kB
31.811 kB
100.758 kB
31.829 kB
64 B
18 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-avatar
Avatar
47.22 kB
14.855 kB
react-avatar
AvatarGroup
16.254 kB
6.502 kB
react-avatar
AvatarGroupItem
60.339 kB
18.758 kB
react-charts
HorizontalBarChartWithAxis
63 B
83 B
react-charts
Legends
235.545 kB
70.669 kB
react-charts
Sparkline
80.888 kB
26.864 kB
react-components
react-components: Button, FluentProvider & webLightTheme
66.281 kB
19.002 kB
react-components
react-components: FluentProvider & webLightTheme
39.504 kB
13.112 kB
react-datepicker-compat
DatePicker Compat
216.224 kB
63.964 kB
react-dialog
Dialog (including children components)
89.951 kB
27.858 kB
react-headless-components-preview
react-headless-components-preview: entire library
251.914 kB
72.891 kB
react-persona
Persona
54.173 kB
16.791 kB
react-portal-compat
PortalCompatProvider
5.341 kB
2.146 kB
react-table
DataGrid
146.759 kB
43.576 kB
react-table
Table (Primitives only)
36.893 kB
12.305 kB
react-table
Table as DataGrid
118.503 kB
33.331 kB
react-table
Table (Selection only)
65.373 kB
18.591 kB
react-table
Table (Sort only)
64.036 kB
18.204 kB
react-tag-picker
@fluentui/react-tag-picker - package
174.01 kB
54.191 kB
react-tags
InteractionTag
12.463 kB
4.942 kB
react-tags
Tag
28.376 kB
8.9 kB
react-tags
TagGroup
69.648 kB
21.404 kB
react-timepicker-compat
TimePicker
140.867 kB
46.058 kB
react-tree
FlatTree
135.661 kB
40.459 kB
react-tree
PersonaFlatTree
137.524 kB
40.991 kB
react-tree
PersonaTree
133.605 kB
39.781 kB
react-tree
Tree
131.748 kB
39.265 kB
🤖 This report was generated against f3411407439f647f95a2f21184a631f4624de1d6

@github-actions

Copy link
Copy Markdown

Pull request demo site: URL

@@ -0,0 +1,7 @@
{

@github-actions github-actions Bot Jul 23, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🕵🏾‍♀️ visual changes to review in the Visual Change Report

vr-tests-react-components/CalendarCompat 4 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/CalendarCompat.multiDayView - High Contrast.default.chromium.png 680 Changed
vr-tests-react-components/CalendarCompat.multiDayView - Dark Mode.default.chromium.png 555 Changed
vr-tests-react-components/CalendarCompat.multiDayView.default.chromium_1.png 481 Changed
vr-tests-react-components/CalendarCompat.multiDayView.default.chromium.png 391 Changed
vr-tests-react-components/Menu 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Menu.Nested Submenus Small Viewport Stacked.nested menu.chromium.png 923 Changed
vr-tests-react-components/Positioning 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Positioning.Positioning end.chromium.png 625 Changed
vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png 608 Changed
vr-tests-react-components/ProgressBar converged 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - Dark Mode.default.chromium.png 2 Changed
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness.default.chromium.png 41 Changed
vr-tests-react-components/TagPicker 3 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/TagPicker.disabled - RTL.disabled input hover.chromium.png 635 Changed
vr-tests-react-components/TagPicker.disabled - Dark Mode.chromium.png 658 Changed
vr-tests-react-components/TagPicker.disabled.disabled input hover.chromium.png 677 Changed

There were 4 duplicate changes discarded. Check the build logs for more information.

@bsunderhus bsunderhus left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM ✅, please fix description and title

@petdud

petdud commented Jul 30, 2026

Copy link
Copy Markdown
Contributor Author

Standalone repro outside Teams:

The direct preview is pinned to @fluentui/react-components@9.74.4 and has been browser-verified. It exposes both focus transitions:

  1. Outside → outside: focus remains external for the entire interaction. The released Popover incorrectly dismisses (status becomes closed); with this PR it should stay open.
  2. Inside → outside: focus first enters the Popover and then leaves. It should dismiss both before and after the fix.

This isolates the Editor SDK / Teams scenario without any Teams dependencies.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot-Session: 90f4e743-9619-4c22-8707-20aeda09c96e
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants