Backdrop click crashes when opening child modal

[mauricekindermann]

Hey! I was stress testing something I'm building and ran into a race condition I cannot solve:
https://www.loom.com/share/b2b661b8f07247c98577ce4de7e5af82

Environment: wire-elements/modal ^3.0, Laravel 12, Livewire 3

When you open a child modal and quickly click the backdrop (interuptting the child modal), the child modal flickers then crashes, and can only be fixed by a page refresh.

It's simple enough to reproduce:

1. Open a modal
2. Click a button that opens another modal (child modal)
3. Click the backdrop immediately while it's transitioning

I noticed at the bottom of this page (Demo Time) you have a Slide-Over example that uses a child compontent, and the dismiss seems to interupt it nicely.
https://wire-elements.dev/pro

The backdrop is not the direct issue - even if I disable the backdrop and use a Cancel button I can reproduce it, as shown in the video above.

Is this a limitation fo the free version, does Pro solve this with modals? Or is this an issue in both verisons? If Pro solves it I'll just buy it.

Thanks Philo!

[PhiloNL]

This is likely because the modal hasn't finished the entire process of closing. One way would be to add a check that waits until the element is hidden.

Not tested, but it could be something like:

<button
    x-data
    x-on:click="openModalWhenHidden(() => $dispatch('openModal', { component: 'users' }))"
>
    Show Users
</button>

<script>
function openModalWhenHidden(callback, retries = 3, delay = 500) {
    const el = document.querySelector('.modal');
    const visible = el && el.offsetParent !== null;

    if (!visible) {
        callback();
    } else if (retries > 0) {
        setTimeout(() => openModalWhenHidden(callback, retries - 1, delay), delay);
    }
}
</script>

So it will call $dispatch('openModal'... once the modal/overlay is hidden. (make sure to update the selector)

[mauricekindermann]

Yo Philo,

Thanks for the suggestion! I gave your openModalWhenHidden approach a shot, plus a bunch of other things:

• Debouncing modal triggers to prevent rapid clicks
• Adding isClosing flags to skip state updates when modal is closing
• Using Livewire's exception() lifecycle hook to catch errors
• Implementing Livewire interceptors to cancel pending updates
• Removing wire:init auto-firing (just delays the problem)
• Component-scoped $wire.intercept() (syntax issues, couldn't get it working)

Unfortunately none of these worked.

I did find another issue, related yet different, when using WireElements, but I submitted that as an official bug to Caleb/Josh:
livewire/livewire#9501

But this fix doesn't fix the child modal backdrop in my original video above.