FilePond上传图片进度达100%后模态框自动关闭问题如何解决

问题原因 #

模态框自动关闭是因为Livewire完成文件上传后会触发组件DOM重渲染，你当前的模态框显隐状态仅通过原生JS存储在DOM的class中，Livewire没有跟踪该状态，重渲染时会将模态框恢复为默认的隐藏状态。

解决方案1（推荐：状态统一管理） #

将模态框的显隐状态交由Livewire统一管理，从根源避免状态丢失：

1. 在对应的Livewire发帖组件中新增如下代码：

// 声明控制模态框显隐的公共属性
public $showCreatePostModal = false;

// 打开模态框方法
public function openCreatePostModal()
{
    $this->showCreatePostModal = true;
    // 可选：打开时重置表单内容
    $this->reset(['body', 'image_paths']);
}

// 关闭模态框方法
public function closeCreatePostModal()
{
    $this->showCreatePostModal = false;
}

// 可选：发帖成功后自动关闭模态框
public function storePost()
{
    // 原有存储逻辑保持不变
    $this->closeCreatePostModal();
}

2. 修改模态框触发按钮，移除原有的show-modal类，替换为Livewire点击事件：

<button class="bg-blue-600 hover:bg-blue-700 px-3 py-1 rounded text-white m-5" wire:click="openCreatePostModal">show modal</button>

3. 修改模态框外层结构，通过Livewire属性控制显隐，移除原有的固定hidden类：

<div 
    class="modal h-screen w-full fixed left-0 top-0 flex justify-center items-center bg-black bg-opacity-50"
    @class(['hidden' => !$showCreatePostModal])
>

4. 修改模态框关闭按钮，移除原有的close-modal类，替换为Livewire点击事件：

<button class="text-black" wire:click="closeCreatePostModal">&cross;</button>

5. 删除原有控制模态框显隐的原生JS脚本即可。

解决方案2（快速修复） #

如果不想改动现有模态框控制逻辑，只需在模态框最外层div添加wire:ignore.self属性，告知Livewire重渲染时不要修改模态框本身的DOM属性，即可避免状态被重置：

<div class="modal h-screen w-full fixed left-0 top-0 flex justify-center items-center bg-black bg-opacity-50 hidden" wire:ignore.self>

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