Why can't I click on my page button after closing wire-elements modal? - laravel-8

Question

I'm using wire-elements/modal (version 1.0.7) to display modals on click on table rows. I have to precise that the table is a livewire component.
But when I close the modal (just by clicking outside this one), I can't click on another rows on my table to display another modal. I have to refresh the page to click on another row.
It seems that th emodal component are still running...
But when I inspect with livewire Devtools :
when I open my modal :
activeComponent:"fa6d179c2d78dfd5686620efe2fbe09f"
components:Object
fa6d179c2d78dfd5686620efe2fbe09f:Object
attributes:Object
modalAttributes:Object
name:"contact-modal"
and after closing the modal :
activeComponent:null
components:Array[0]
Some errors shows in the console :
cdn.min.js:5 Uncaught (in promise) {isFromCancelledTransition: true}isFromCancelledTransition: true[[Prototype]]: Objectconstructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()__proto__: (...)get __proto__: ƒ __proto__()set __proto__: ƒ __proto__()
(anonymous) # cdn.min.js:5
(anonymous) # app.js:1126
(anonymous) # app.js:902
transition # app.js:1076
out # app.js:1017
(anonymous) # cdn.min.js:5
window.Element._x_toggleAndCascadeWithTransitions # cdn.min.js:5
(anonymous) # cdn.min.js:5
(anonymous) # cdn.min.js:5
(anonymous) # cdn.min.js:5
we # cdn.min.js:5
(anonymous) # cdn.min.js:5
Yt # cdn.min.js:1
(anonymous) # cdn.min.js:5
r # cdn.min.js:5
ln # cdn.min.js:1
cdn.min.js:5 Uncaught (in promise) {isFromCancelledTransition: true}
(anonymous) # cdn.min.js:5
(anonymous) # app.js:1126
(anonymous) # app.js:902
transition # app.js:1076
out # app.js:1017
(anonymous) # cdn.min.js:5
window.Element._x_toggleAndCascadeWithTransitions # cdn.min.js:5
(anonymous) # cdn.min.js:5
(anonymous) # cdn.min.js:5
(anonymous) # cdn.min.js:5
we # cdn.min.js:5
(anonymous) # cdn.min.js:5
Yt # cdn.min.js:1
(anonymous) # cdn.min.js:5
r # cdn.min.js:5
ln # cdn.min.js:1
cdn.min.js:5 Uncaught (in promise) TypeError: u is not a function
at cdn.min.js:5:9014
at async Promise.all (index 3)
(anonymous) # cdn.min.js:5
Promise.catch (async)
(anonymous) # cdn.min.js:5
requestAnimationFrame (async)
(anonymous) # cdn.min.js:5
cdn.min.js:5 Uncaught (in promise) TypeError: u is not a function
at cdn.min.js:5:9014
Some codes to understand :
My modal blade view :
<div>
<div>
<div>
<div>
<p>{{$contact->firstname}} <span>{{$contact->lastname}}</span></p>
{{$contact->client->society_name}}
#if($contact->type)
<p>{{$contact->type->name}}</p>
#endif
#if($contact->role)
<p>{{$contact->role}}</p>
#endif
<p>{{$contact->phone}}</p>
<p>{{$contact->email}}</p>
</div>
</div>
<div>
#if($contact->phone)
Call
#endif
#if($contact->email)
Email
#endif
</div>
</div>
</div>
My livewire modal component :
<?php
namespace App\Http\Livewire;
use App\Models\Contact;
use LivewireUI\Modal\ModalComponent;
class ContactModal extends ModalComponent
{
public $contact;
public function mount(int $contact)
{
$this->contact = Contact::find($contact);
}
public function render()
{
return view('livewire.contact-modal');
}
}
Do you have any idea why it doesn't work?

Answer 1

I found the solution here :
Laracast:livewire-modal freezing page
Alpinjs is called twice on my app (with an unpkg link and the #livewire('livewire-ui-modal') directive).
So I remove the unpkg link and it works like a charm!