Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

gabriel27's avatar

Filament 3 closing modal after form submit

Hello, I have a custom page which uses livewire components to create and/or edit multiple models each in modals.

Each livewire included is a form:

<div>
    <h1 class="fi-header-heading text-2xl font-bold tracking-tight text-gray-950 dark:text-white sm:text-3xl">Add/Edit Content</h1>
    <form wire:submit="create" class="mt-6">
        {{ $this->form }}
        <div class="mt-6">
            <x-filament::button type="submit" size="lg">
                Save
            </x-filament::button>
        </div>
    </form>
</div>

And at the end of the parent component I added:

<x-filament-actions::modals />

I have HasForms and InteractsWithForm and after I submit it will save and refresh the parent component using an event issued but it will not close the modal.

Why would a filament modal not close after form submit if the validation passes?

Thank you.

0 likes
4 replies
LaryAI's avatar
Level 58

It sounds like you're using Filament with Livewire and you're expecting the modal to close automatically after a successful form submission. If the modal is not closing, it's possible that you need to manually trigger the closing of the modal from your Livewire component.

Here's a solution that you can try:

  1. Ensure that you have a method in your Livewire component that handles the form submission. For example, create().

  2. After the form is successfully processed, emit an event to close the modal.

Here's an example of what your Livewire component's method might look like:

public function create()
{
    // Perform validation and create the model
    $this->validate();
    // ... Model creation logic

    // Emit an event to close the modal
    $this->dispatchBrowserEvent('close-modal');
}
  1. On the front end, listen for the close-modal event and close the modal using JavaScript. You can add this script to your Blade file where the modal is defined:
<script>
    window.addEventListener('close-modal', event => {
        // Assuming you have a reference to your modal element
        let modal = document.getElementById('your-modal-id');
        // Close the modal
        modal.close();
        // Or if you're using Filament's modal component, you might need to call a specific method
        // Filament.closeModal('your-modal-id');
    });
</script>

Make sure to replace 'your-modal-id' with the actual ID of your modal.

If you're using Filament's built-in modal component, you might need to use the specific method provided by Filament to close the modal. Check the Filament documentation for the exact method to use.

Remember to include the script tag at the end of your Blade file, so it's loaded after the Livewire scripts.

By following these steps, you should be able to close the modal after the form submission is successfully completed.

gabriel27's avatar

@LaryAI I belive dispatchBrowserEvent is replaced by dispatch in Livewire 3 and when tested the code with this correction it is not working as I do not know the modal component close method.

Does anyone know which event to dispatch in order to close the modal?

Merklin's avatar

@gabriel27 If you are ok with this, the simples way is to surround the modal with if else and introduce a boolean variable. Something like:

@if ($showAddRecordModal)
	<x-filament-actions::modals />
@endif

and then update your CRUD to set the variable to true/false.

Diogo2550's avatar

It's a bit late, but if someone comes across the same problem, it's possible to do the following solution: following the condition mentioned by Laracast A.I, just change $this->dispatchBrowserEvent('close-modal'), to $this->dispatch('close-modal', id: 'modal_id').

The only condition is, when the modal is created, to add an id for this modal, for example:

<x-filament::modal id="create-form">
...
</x-filament::modal>

Please or to participate in this conversation.