Closing a modal from a cancel button causes unexpected behavior, except Escape key

[pathros]

According to the official doc ... article, I can close a modal from a button click with the following:

<button wire:click="$emit('closeModal')">Close Modal</button>

After clicking on the button, the real-time validation seems to trigger anyway and yes the modal closes. After being closed, my livewire datatable stops working.

However, (I reload the page to open again the modal) when I hit the "Escape" key to close the modal, everything is working fine after the modal is closed.

Maybe there's a bug out there?
Otherwise, is there a simple or neat way to close the modal right from clicking a "cancel" button?

Meanwhile, I have just left a help text "press escape to cancel".

[PhiloNL]

Add type="button" to your button element, otherwise, it will trigger the form submit.

[pathros]

Thanks. I have added that type="button". However, the issue still persists.

versions

TailwindCSS: 3.0.15
Livewire: 2.9.0
Alpine: 3.8.1
wire-elements/modal: 1.0.3
Laravel Framework: 8.79.0
PHP: 8.0

What I tried

I have implemented a very simple livewire datatable. Again, after having opened the modal, when I press the "Esc" key, the livewire datatable still works as normal.

However, if I click on the "Cancel" button either these ways:

1st way:

<button type="button" wire:click="$emit('closeModal')" class="...">Cancel</button>

2nd way:

<button type="button" wire:click="closeTheModal" class="...">Cancel</button>

    public function closeTheModal()
    {
        dd('Indeed, I do want to close the modal by cancelling ....')
        $this->closeModal();
    }

My datatable stops working.

Debugging errors.

Actually, when I open the modal, there's this message in the console log:

Uncaught TypeError: e.$refs[t] is undefined

Then, when I hit on the "Cancel" button, other error shows up (that causes the livewire datatable stop working):

Uncaught (in promise) Object { isFromCancelledTransition: true }
Uncaught (in promise) TypeError: l is not a function

What am I missing? How do I fix it?

[PhiloNL]

I'm unable to replicate this issue. If you can provide a repository with a fresh install of Laravel and the dependencies above and replicating the issue I can take a further look.

[pathros]

I'm unable to replicate this issue. If you can provide a repository with a fresh install of Laravel and the dependencies above and replicating the issue I can take a further look.

There's something strange, even with the simplest table and Modal without using packages I get the same error. There must be something wrong now with the combination of latest npm livewire and alpineJS ... The error actually is reported by alpineJS.

I'll try again as soon as Laravel 9 is released...