Polaris web components random dark un-clickable overlay when opening a s-modal

Polaris
1

Strange bug with s-modal. Happening randomly.

Dark overlay appears when opening a modal.

image
image1600×967 106 KB

This problem happened to my teammate and me today.

Update: I was able to reproduce it randomly and record a screencast.

2 Likes
2

I reported it a couple of days ago here and @Liam-Shopify said they are working on a fix.

We have had multiple reports from merchants and can replicate it at times. Hope we get a fix soon because this affects key actions in our apps.

3

Thanks for sharing this @nunof :folded_hands: I hope they fix soon.

4

Please share the code snippet you are using so that we can reproduce on our side.

5

Sure @jzaz here is the code. Thanks for looking into it :folded_hands:

<s-modal id="delete-modal" heading="Delete product group?">
<s-box>
    <s-text>Are you sure you want to delete the group?</s-text>
    <s-box paddingBlockStart="base">
        <s-text tone="critical">This action cannot be undone.</s-text>
    </s-box>
</s-box>
<s-button
    slot="primary-action"
    variant="primary"
    tone="critical"
    commandFor="delete-modal"
    command="--hide"
    onClick={deleteProductGroup}
    loading={isDeleting}
>
    Delete
</s-button>
<s-button
    slot="secondary-actions"
    variant="secondary"
    commandFor="delete-modal"
    command="--hide"
>
    Cancel
</s-button>
</s-modal>

And this is how I trigger it

const openDeleteModal = () => {
  if (!isEditMode || !id) return;
  const showModal = () => document.getElementById('delete-modal').showOverlay();
  shopify.saveBar.leaveConfirmation().then(showModal).catch(showModal);
};
6

I had this issue today, it appears to be when you use the showOverlay and hideOverlay methods.

Is there a need for these? the commandFor should manage the overlays for you.

7

@Luke, it also happens with commandFor only. It happens randomly with any code.

8

Thanks for the comment @Luke I remember I had to switch to these methods because I was experiencing some other problem with commandFor and then had to change code. And these are documented methods I think they also should work.

image
image1920×1273 245 KB

9

I have tested all possible ways, and it randomly shows up no matter how you implement it. I cannot seem to find a pattern, but my guess is that it’s some kind of race condition when hiding that overlay.

We use confirmation modals for some critical actions and have been having multiple merchant reports.

Another example here using commandFor only.

1 Like
10

Looking into this - thanks for sharing the code

11

Any update on this? :folded_hands: @jzaz

Customers are stuck and cannot perform any actions when this occurs.

image
image2080×910 49.9 KB

1 Like
12

Hi Philo, we are still looking into this because the issue is intermittent.

Do you know which browser and version the merchants are using?

1 Like
13

Hi Jzaz,

I also experienced it myself using:

Brave 1.88.132 (Official Build) (arm64)
Chromium: 146.0.7680.80

1 Like
14

Can also replicate it on Chrome 145.0.7632.160 (Official Build) (arm64).

1 Like
16

Thanks you all for your patience. This bug has been fixed now!

1 Like
17

Amazing @jzaz thanks for the fix :folded_hands:

1 Like