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

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
Add some stories for testing
  • Loading branch information
@tellthemachines
tellthemachines committed Oct 21, 2025
commit 869d987d6b8e0b60ede3f2196baba8f0be643186
177 changes: 177 additions & 0 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,6 +18,8 @@ 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 @@ -693,3 +695,178 @@ 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' },
},
},
};