[Nested popover or menu] --hide command closes parent popover unexpectedly

Polaris
1

Hi Shopify team,

I’m experiencing an issue with nested <s-popover> or <s-menu> components. When I use a command="--hide" on a nested menu or child popover inside a parent popover, it closes the parent popover as well, even though I only want to close the child.

Here’s a minimal example:

<s-button commandFor="mainPopover" command="--show">Open main popover</s-button>

<s-popover id="mainPopover">
  <div>Some main popover content</div>

  <s-button commandFor="childPopover" command="--show">Open child popover</s-button>

  <s-popover id="childPopover">
    <div>Child popover content</div>
    <s-button commandFor="childPopover" command="--hide">Close child popover</s-button>
  </s-popover>
</s-popover>

Behavior:

  • Clicking “Close child popover” also closes mainPopover.

  • I have confirmed it’s not just event bubbling—this seems to happen because the --hide command propagates to parent popovers.

I also see this behavior with <s-menu> nested inside a popover. For example, selecting an item in a nested menu closes the parent popover unexpectedly.

3 Likes
2

Hi @Andriy_Yurchuk

Thanks for flagging this - our team are working on an update which will improve this experience.

1 Like