Dropdown: Close popover when focus moves into an unrelated dialog by wprashed · Pull Request #82170 · WordPress/gutenberg

wprashed · 2026-08-28T09:37:35Z

Description

When a Dropdown popover is open (e.g. "Transform to" block switcher popover on Custom HTML block) and the user opens an unrelated dialog (e.g. clicking "Edit code" on the toolbar), the Dropdown previously kept the popover stuck open behind the modal dialog.

Cause

Dropdown's closeIfFocusOutside checked if focus moved into any [role="dialog"], treating any dialog on the page as a reason to preserve presence. However, it couldn't distinguish whether the dialog was launched from inside the dropdown itself (e.g. Preferences modal from Options menu) vs launched by an unrelated element elsewhere on the page.

Solution

This PR updates Dropdown to:

Track whether the last user interaction (pointerdown or focusin) occurred inside the Dropdown container or popover.
Ignore focusin events landing directly inside a [role="dialog"], because focus moving into a dialog on mount is the consequence of an action, not the user interaction that triggered it.
Close the popover if focus moves into a dialog that was NOT launched from inside the dropdown itself.

Testing Instructions

Insert a Custom HTML block with some content (e.g. <h1>Test</h1>).
Click the block switcher icon in the block toolbar to open the "Transform to" popover.
Click "Edit code" on the block toolbar while the "Transform to" popover is open.
Verify that the "Edit code" modal opens and the "Transform to" popover cleanly closes (no longer stuck open behind the modal).
Open the Options menu (three dots in editor header) and click "Preferences".
Verify that the Options menu popover preserves presence while the Preferences modal is active.

When the accordion content style was changed to support in-browser search via `hidden="until-found"` (WordPress#74744), the browser applies `content-visibility: hidden`. Because `content-visibility: hidden` hides contents without removing the container box model, any user- or theme-defined padding on the Accordion Panel block produced an empty gap below the title when the accordion was closed. This resets `padding-block: 0 !important` on `.wp-block-accordion-panel[hidden]` so the closed panel occupies no vertical space while preserving the full padding when the panel is open. Fixes WordPress#65900 (Trac WordPress#65900).

Addresses review feedback by ensuring borders and box shadows are also reset when the accordion panel is hidden, along with padding.

Fixes WordPress#82124 When a Dropdown popover is open and focus moves into a `[role="dialog"]`, Dropdown previously preserved presence for any dialog on the page, even if the dialog was launched from an unrelated element (such as clicking 'Edit code' on the Custom HTML toolbar). This updates Dropdown to track whether the last user interaction (pointerdown or focusin) occurred inside the Dropdown container/popover. If focus moves into a dialog that was NOT launched from inside the dropdown, the popover closes cleanly.

github-actions · 2026-08-28T09:37:46Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: wprashed <wprashed@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: himanshupathak95 <abcd95@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

…open

ciampo · 2026-08-28T13:57:24Z

+	const popoverRef = useRef< HTMLDivElement >( null );
+	const mergedPopoverRef = useMergeRefs( [ popoverRef, popoverProps?.ref ] );


popoverProps.ref is excluded by the public type, so this currently fails type checking. It should not be added solely for internal bookkeeping. The interaction origin can instead be tracked through capture handlers on the Dropdown wrapper, which also receive events from the portaled Popover. This removes the need for popoverRef and useMergeRefs.

ciampo · 2026-08-28T14:05:00Z

+			// Ignore focusin events landing inside a [role="dialog"], because
+			// focus moving into a dialog (e.g. on modal mount) is the consequence
+			// of an action, not the user interaction that triggered it.
+			if (
+				event.type === 'focusin' &&
+				( target as Element ).closest?.( '[role="dialog"]' )
+			) {
+				return;
+			}


The handler ignores all focus entering a dialog. But a keyboard user can therefore Tab into an existing unrelated non-modal dialog and leave the dropdown open.

We should preserve the dropdown only when the dialog focus follows an activation from inside it (and ideally cover this keyboard path in the tests)

ciampo · 2026-08-28T14:07:15Z

 		expect( screen.queryByText( 'test' ) ).not.toBeInTheDocument();
 	} );
+
+	it( 'should close the dropdown when focus moves into an unrelated dialog', async () => {


some feedback:

I believe this external-dialog test also would also pass on trunk without this PR's fix.

includeHidden is unsupported and fails type checking. We could use hidden: true or assert onClose and DOM removal.

We should also verify that the related dialog returns focus to its dropdown trigger after closing.

After these changes, let's confirm the test fails on the base and passes with the fix.

ciampo · 2026-08-28T14:07:44Z


 ### Bug Fixes

+-   `Dropdown`: Close popover when focus moves to an unrelated dialog outside the dropdown ([#82124](https://github.com/WordPress/gutenberg/issues/82124)).


THe changelog should link to this PR

Suggested change

- `Dropdown`: Close popover when focus moves to an unrelated dialog outside the dropdown ([#82124](https://github.com/WordPress/gutenberg/issues/82124)).

- `Dropdown`: Close popover when focus moves to an unrelated dialog outside the dropdown ([#82170](https://github.com/WordPress/gutenberg/issues/82170)).

ciampo · 2026-08-31T13:37:13Z

@wprashed let me know if you're still able to work on this PR, otherwise I'll take over.

ciampo · 2026-09-01T10:05:03Z

Closing for inactivity. Will continue in #82284 and credit @wprashed as a co-author.

wprashed · 2026-09-03T07:20:00Z

Continued in #82371 with all review feedback addressed (capture event handlers, keyboard Tab support, complete test suite in index.jsdom.test.tsx, and changelog entry).

wprashed and others added 6 commits August 18, 2026 16:52

Reset borders, box shadows, and padding on hidden accordion panel.

8f03ebe

Addresses review feedback by ensuring borders and box shadows are also reset when the accordion panel is hidden, along with padding.

Merge branch 'trunk' into fix/65900-accordion-panel-padding-when-hidden

cd4be9d

Add changelog entry for Accordion Panel hidden padding fix

c299cfc

Merge upstream/trunk and resolve CHANGELOG.md conflict

80a5fca

wprashed requested review from a team, ajitbohra and fabiankaegy as code owners August 28, 2026 09:37

wprashed mentioned this pull request Aug 28, 2026

Custom HTML: Transform popover stays open when opening "Edit code" from the block toolbar #82124

Closed

6 tasks

github-actions Bot added [Package] Components /packages/components [Package] Block library /packages/block-library labels Aug 28, 2026

Merge upstream/trunk and resolve CHANGELOG.md conflict

4f3fb40

wprashed force-pushed the fix/82124-dropdown-popover-stuck-on-dialog-open branch from dca3257 to 4f3fb40 Compare August 28, 2026 09:39

github-actions Bot removed the [Package] Block library /packages/block-library label Aug 28, 2026

Merge branch 'trunk' into fix/82124-dropdown-popover-stuck-on-dialog-…

ca55111

…open

ciampo reviewed Aug 28, 2026

View reviewed changes

t-hamano added [Type] Bug An existing feature does not function as intended Browser Issues Issues or PRs that are related to browser specific problems labels Aug 29, 2026

Update CHANGELOG.md entry to link to PR WordPress#82170

e2ba81a

ciampo mentioned this pull request Sep 1, 2026

Dropdown: Close popover for unrelated dialog-like overlays #82284

Closed

ciampo closed this Sep 1, 2026

wprashed mentioned this pull request Sep 3, 2026

Dropdown: Close popover when focus moves into an unrelated dialog #82371

Closed

Navigation Menu

Uh oh!

Dropdown: Close popover when focus moves into an unrelated dialog - #82170

Dropdown: Close popover when focus moves into an unrelated dialog#82170
wprashed wants to merge 9 commits into
WordPress:trunkfrom
wprashed:fix/82124-dropdown-popover-stuck-on-dialog-open

wprashed commented Aug 28, 2026

Uh oh!

github-actions Bot commented Aug 28, 2026 •

edited

Loading

Uh oh!

ciampo Aug 28, 2026

Uh oh!

ciampo Aug 28, 2026

Uh oh!

ciampo Aug 28, 2026

Uh oh!

ciampo Aug 28, 2026

Uh oh!

ciampo commented Aug 31, 2026

Uh oh!

ciampo commented Sep 1, 2026

Uh oh!

wprashed commented Sep 3, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		const popoverRef = useRef< HTMLDivElement >( null );
		const mergedPopoverRef = useMergeRefs( [ popoverRef, popoverProps?.ref ] );


		### Bug Fixes

		- `Dropdown`: Close popover when focus moves to an unrelated dialog outside the dropdown ([#82124](https://github.com/WordPress/gutenberg/issues/82124)).

Uh oh!

Conversation

wprashed commented Aug 28, 2026

Description

Cause

Solution

Testing Instructions

Uh oh!

github-actions Bot commented Aug 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ciampo Aug 28, 2026

Choose a reason for hiding this comment

Uh oh!

ciampo Aug 28, 2026

Choose a reason for hiding this comment

Uh oh!

ciampo Aug 28, 2026

Choose a reason for hiding this comment

Uh oh!

ciampo Aug 28, 2026

Choose a reason for hiding this comment

Uh oh!

ciampo commented Aug 31, 2026

Uh oh!

ciampo commented Sep 1, 2026

Uh oh!

wprashed commented Sep 3, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

github-actions Bot commented Aug 28, 2026 •

edited

Loading