S-button loading attribute doesn't work inside s-menu

Polaris
1

s-button loading attribute doesn’t work inside a s-menu

<s-menu id="actions" accessibilityLabel="Service actions">
  <s-button icon="delete" variant="tertiary" tone="critical"
       onclick={(e) => {
                    e.preventDefault();
                    e.currentTarget.loading = true;
                    deleteProduct(item);
                  }}>
       Delete product
  </s-button>
</s-menu>

Is this an expected behavior ?

Thank you!

2

Hi there, this is expected. We don’t plan on supporting the pattern of menu items having a loading state. The expected flow should look something like:

  1. Click Delete product
  2. Action is performed, menu gets closed
  3. Some other UI informs the user that the action was complete or an error occurred
3

Thank you, I understand!

4

How does the s-menu get closed? In my case it stays open after the click on the s-button

5

We use a function like this to close the s-menu

export function closeMenu() {
  const clickEvent = new MouseEvent('click', { bubbles: true, cancelable: true, view: window });
  document.body.dispatchEvent(clickEvent);
}
6

Thanks that worked.

Apparently, s-menu automatically closes itself when it detects a bubbled click on the document body, so triggering that synthetic event achieves the desired behaviour.

1 Like