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...

[taufiqridha]

I'm also having this issue.
Working fine with "esc" pressed. but using button to close modal or having emit $this->forceClose()->closeModal() or $this->emit('closeModal'); has error with same debug like @pathros from Alpine 3.8.1

[taufiqridha]

Solved for now. I have jsInclude config set to true. and on my layout I get Alpine from cdn.
Now when i try to remove Alpine CDN on my layout. it's working. Maybe you should try to remove Alpine if you have them in the layout @pathros

[oohegor]

Thank you man! it works

[Piket564]

Same issue here

I've removed the AlpineJS CDN, same problem