S-modal broken overlay

Hi,

We received reports from several users that they were unable to perform certain key actions in our app.

After some testing, we found out that s-modal is intermittently displaying an overlay on open that prevents any interaction with it

I’ve tested on a clean app using this code and can replicate the problem:

  <s-button commandFor="modal">Open</s-button>

  <s-modal id="modal" heading="Details">
    <s-paragraph>Displaying more details here.</s-paragraph>

    <s-button slot="secondary-actions" commandFor="modal" command="--hide">
      Close
    </s-button>
    <s-button
      slot="primary-action"
      variant="primary"
      commandFor="modal"
      command="--hide"
    >
      Save
    </s-button>
  </s-modal>
</>

Here’s the problem:

It doesn’t happen consistently and not to all users, but I can replicate it quite frequently in Chrome 145.0.7632.160 (Official Build) (arm64).

This is preventing users from taking key actions in our app. Can someone have a look at it, please?

Thanks!

3 Likes

Hi @nunof

It does look like this is a bug on our side - we are working on fix for this currently.

Thanks @Liam-Shopify! If you could let me know once it’s sorted, I would appreciate it.

Hi folks - we shipped an update for this recently, so this should be resolved now. Please let us know if you’re still seeing this issue?

@Liam-Shopify
The issue has not been resolved yet. I am still facing the same problem. Please check and provide an update.

Thanks @Liam-Shopify. I wasn’t able to replicate it again yet, but this was intermittent, so I will keep an eye on it anyway.

1 Like

Hi @Liam-Shopify

The issue still exists unfortunately.

@Liam-Shopify, I was also also able to replicate it again.

Hey folks - we shipped an update for this, can you check and let us know if you’re still seeing this issue?


Still modal is not working with direction: rtl [ CSS property ]. modal major part is covered by left side menubar. as you can see in above screenshot.

This is a different issue; please open a new Topic, and also provide a way to reproduce it. Something like a codepen example would be great.

1 Like