关闭wire-elements modal后无法点击表格行的问题求助

我正在使用wire-elements/modal（版本1.0.7），通过点击Livewire组件表格的行来展示模态框。但点击模态框外部关闭后，无法再点击表格的其他行打开新模态框，必须刷新页面才行。

Livewire Devtools 观察结果 #

打开模态框时：

activeComponent:"fa6d179c2d78dfd5686620efe2fbe09f"
components:Object
fa6d179c2d78dfd5686620efe2fbe09f:Object
attributes:Object
modalAttributes:Object
name:"contact-modal"

关闭模态框后：

activeComponent:null
components:Array[0]

控制台报错 #

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

相关代码 #

模态框Blade视图 #

<div>
    <div>
        <div>          
            <div>
                <p>{{$contact->firstname}} <span>{{$contact->lastname}}</span></p>
                <a href="{{route('clients.show', ['id' => $contact->client->id])}}">{{$contact->client->society_name}}</a>
                @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)
            <a href="tel:{{ $contact->client->phone }}">Call</a>
            @endif
            @if($contact->email)
            <a href="mailto:{{ $contact->client->email}}">Email</a>
            @endif
        </div>
    </div>
</div>

Livewire模态框组件 #

<?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');
    }
}

请问有人知道这是什么原因导致的吗？

1. 过渡动画冲突 #

控制台中的isFromCancelledTransition报错，说明模态框关闭时的过渡动画被中断，可能导致Livewire事件绑定未正确恢复。可以先禁用过渡动画测试：

• 在调用模态框时添加过渡关闭参数：

$this->dispatchBrowserEvent('openModal', [
    'component' => 'contact-modal',
    'arguments' => ['contact' => $id],
    'modalAttributes' => ['transition' => 'false']
]);

2. 版本兼容性问题 #

wire-elements/modal 1.0.7版本较旧，可能与当前使用的Livewire版本不兼容。建议升级到最新稳定版：

composer require livewire-ui/modal:^2.0

升级后需根据官方文档调整代码（如模态框关闭逻辑、组件注册方式等）。

3. 事件绑定丢失 #

表格行的点击事件可能在模态框销毁后未重新绑定。可以在表格所在的Livewire组件中监听模态框关闭事件，重新初始化绑定：

protected $listeners = ['modalClosed' => 'refreshRowListeners'];

public function refreshRowListeners()
{
    $this->dispatchBrowserEvent('refreshRowClicks');
}

前端添加对应的事件监听：

window.addEventListener('refreshRowClicks', () => {
    document.querySelectorAll('.table-row').forEach(row => {
        row.addEventListener('click', function() {
            Livewire.dispatch('openModal', { 
                component: 'contact-modal', 
                arguments: { contact: this.dataset.contactId } 
            });
        });
    });
});

4. 组件销毁不彻底 #

从Devtools结果看，模态框关闭后组件已清空，但可能存在残留未处理的Promise，导致后续调用报错。可以在模态框组件中添加手动清理方法：

public function closeModal()
{
    $this->reset('contact');
    parent::closeModal();
}

关闭模态框时调用该方法，替代仅依赖外部点击关闭的逻辑。

内容的提问来源于stack exchange，提问作者Petitemo