Skip to content

Fix Popover closing unexpectedly when a Menu inside it is closed. #72376

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Oct 22, 2025
Merged

Fix Popover closing unexpectedly when a Menu inside it is closed. #72376

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
353c7d0
Fix Dropdown closing unexpectedly when a Menu inside it is closed.
tellthemachines Oct 16, 2025
55204b9
changelog update
tellthemachines Oct 16, 2025
869d987
Add some stories for testing
tellthemachines Oct 16, 2025
30aaec0
Check blur event in popover instead of dropdown
tellthemachines Oct 17, 2025
892f1d3
Preserve previous logic
tellthemachines Oct 17, 2025
9c3c8e9
Remove story and update changelog.
tellthemachines Oct 21, 2025
eabb81c
update changelog _again_
tellthemachines Oct 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Remove story and update changelog.
  • Loading branch information
@tellthemachines
tellthemachines committed Oct 21, 2025
commit 9c3c8e9c3d5961f571373683d1cfcbdac2974010
2 changes: 1 addition & 1 deletion packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@

### Bug Fixes

- `Dropdown`: Fix `onFocusOutside` passed to `Popover` to only close the dropdown if the blur event targets the specific dropdown instance ([#72376](https://github.com/WordPress/gutenberg/pull/72376)).
- `Popover`: Fix `onDialogClose` logic to only close the popover if the blur event targets the specific popover instance ([#72376](https://github.com/WordPress/gutenberg/pull/72376)).
- `ValidatedCheckboxControl`, `ValidatedRadioControl`, `ValidatedToggleControl`: Fix issue where validation may not be triggered in Safari when elements are toggled by clicking ([#72115](https://github.com/WordPress/gutenberg/pull/72115)).

### Internal
Expand Down
177 changes: 0 additions & 177 deletions packages/components/src/menu/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,6 @@ import { Menu } from '..';
import Icon from '../../icon';
import Button from '../../button';
import Modal from '../../modal';
import Popover from '../../popover';
import Dropdown from '../../dropdown';
import { createSlotFill, Provider as SlotFillProvider } from '../../slot-fill';
import { ContextSystemProvider } from '../../context';
import type { Props } from '../types';
Expand Down Expand Up @@ -695,178 +693,3 @@ export const InsideModal: StoryObj< typeof Menu > = {
},
},
};

export const InsidePopover: StoryObj< typeof Menu > = {
render: function InsidePopover( props: Props ) {
const [ isPopoverOpen, setPopoverOpen ] = useState( false );
const [ anchorElement, setAnchorElement ] =
useState< HTMLButtonElement | null >( null );

return (
<>
<Button
ref={ setAnchorElement }
onClick={ () => setPopoverOpen( ! isPopoverOpen ) }
__next40pxDefaultSize
variant="secondary"
>
Toggle Popover
</Button>
{ isPopoverOpen && (
<Popover
anchor={ anchorElement }
onClose={ () => setPopoverOpen( false ) }
placement="bottom-start"
>
<div style={ { padding: '16px' } }>
<p style={ { margin: '0 0 16px 0' } }>
Menu inside Popover:
</p>
<Menu { ...props }>
<Menu.TriggerButton
render={
<Button
__next40pxDefaultSize
variant="secondary"
/>
}
>
Open menu
</Menu.TriggerButton>
<Menu.Popover>
<Menu.Item>
<Menu.ItemLabel>
Level 1 item
</Menu.ItemLabel>
</Menu.Item>
<Menu.Item>
<Menu.ItemLabel>
Level 1 item with help text
</Menu.ItemLabel>
<Menu.ItemHelpText>
Some helpful description
</Menu.ItemHelpText>
</Menu.Item>
<Menu.Separator />
<Menu>
<Menu.SubmenuTriggerItem>
<Menu.ItemLabel>
Submenu trigger
</Menu.ItemLabel>
</Menu.SubmenuTriggerItem>
<Menu.Popover>
<Menu.Item>
<Menu.ItemLabel>
Level 2 item
</Menu.ItemLabel>
</Menu.Item>
<Menu.Item>
<Menu.ItemLabel>
Another level 2 item
</Menu.ItemLabel>
</Menu.Item>
</Menu.Popover>
</Menu>
</Menu.Popover>
</Menu>
</div>
</Popover>
) }
</>
);
},

args: {
...Default.args,
},

parameters: {
docs: {
source: { type: 'code' },
},
},
};

export const InsideDropdown: StoryObj< typeof Menu > = {
render: function InsideDropdown( props: Props ) {
return (
<Dropdown
popoverProps={ { placement: 'bottom-start' } }
renderToggle={ ( { isOpen, onToggle } ) => (
<Button
__next40pxDefaultSize
variant="secondary"
onClick={ onToggle }
aria-expanded={ isOpen }
>
Open Dropdown
</Button>
) }
renderContent={ () => (
<div style={ { padding: '16px', minWidth: '200px' } }>
<p style={ { margin: '0 0 16px 0' } }>
Menu inside Dropdown:
</p>
<Menu { ...props }>
<Menu.TriggerButton
render={
<Button
__next40pxDefaultSize
variant="secondary"
/>
}
>
Open menu
</Menu.TriggerButton>
<Menu.Popover>
<Menu.Item>
<Menu.ItemLabel>
Level 1 item
</Menu.ItemLabel>
</Menu.Item>
<Menu.Item>
<Menu.ItemLabel>
Level 1 item with help text
</Menu.ItemLabel>
<Menu.ItemHelpText>
Some helpful description
</Menu.ItemHelpText>
</Menu.Item>
<Menu.Separator />
<Menu>
<Menu.SubmenuTriggerItem>
<Menu.ItemLabel>
Submenu trigger
</Menu.ItemLabel>
</Menu.SubmenuTriggerItem>
<Menu.Popover>
<Menu.Item>
<Menu.ItemLabel>
Level 2 item
</Menu.ItemLabel>
</Menu.Item>
<Menu.Item>
<Menu.ItemLabel>
Another level 2 item
</Menu.ItemLabel>
</Menu.Item>
</Menu.Popover>
</Menu>
</Menu.Popover>
</Menu>
</div>
) }
/>
);
},

args: {
...Default.args,
},

parameters: {
docs: {
source: { type: 'code' },
},
},
};
Loading