<s-menu> in page action slot does not show sections

Polaris
1

When using s-menu as part of secondary actions in a page, s-section inside the menu doesn’t show dividers.

<s-page heading="test">
  <s-button slot="secondary-actions" commandFor="menu">
    Menu
  </s-button>
  <s-menu id="menu">
    <s-section heading="A">
      <s-button>A-1</s-button>
      <s-button>A-2</s-button>
    </s-section>
    <s-section heading="B">
      <s-button>B-1</s-button>
      <s-button>B-2</s-button>
    </s-section>
  </s-menu>
</s-page>

image
image524×262 6.82 KB

When not used in secondary actions, dividers are correctly displayed:

<s-page heading="test">
  <s-section>
    <s-button commandFor="menu">Menu</s-button>
    <s-menu id="menu">
      <s-section heading="A">
        <s-button>A-1</s-button>
        <s-button>A-2</s-button>
      </s-section>
      <s-section heading="B">
        <s-button>B-1</s-button>
        <s-button>B-2</s-button>
      </s-section>
    </s-menu>
  </s-section>
</s-page>

image
image527×339 7.92 KB

2

Hey @xhdtlsid2 - thanks for the clear repro, happy to look into this. A few quick things that would help narrow this down:

  1. Can you try adding the required accessibilityLabel prop to s-menu and confirm whether the section headings/dividers still disappear?

<s-menu id="menu" accessibilityLabel="Menu actions">

  1. Which browser/admin surface are you seeing this in, and does it happen across Chrome/Safari/Firefox?
  2. As a quick isolation test, does it still happen if the <s-menu> is moved outside the while the trigger button stays in the secondary-actions slot?

Just want to narrow down what might be happening here - hope to hear from you soon!

3

Hi @Alan_G ,

  1. Yes, they still disappear after adding accessibilityLabel prop.
  2. I’m seeing this in Chrome, and checked it also happens in Firefox. I don’t currently have access to Safari/macOS to verify there yet.
  3. Yes, it still happens when s-menu is moved outside (same level as s-page).
4

Hey @xhdtlsid2 - thanks for checking those details.

That helps narrow this down quite a bit. Since it still happens with accessibilityLabel, across Chrome/Firefox, and even when the <s-menu> is moved outside of <s-page>, this looks feels like a potential issue with how menu sections are rendering when the menu is triggered from the page secondary-actions slot.

I’m going to flag this on our end.

I’ll loop back here when I have more to share!