FilamentF
Filament17mo ago
98.dev

Cannot close modal after validation

I have a page that shows a custom column:

public function table(Table $table): Table { $user = auth()->user(); $client = Client::query()->where('id', $user->client_id)->first(); return $table ->query($client()->getQuery()) ->columns( [ ViewColumn::make('deadlines') ->label('Deadlines') ->view('filament.tables.columns.client.deadlines') ] ); }

In the custom column Blade.php file, there is a modal that includes a header, content, and a Filament button to trigger a function called submit:

<x-filament::modal :close-button="true" id="test" width="xl"> <x-slot name="heading"> Heading </x-slot> <!-- Modal Content --> <div> {{ $this->form }} </div> <x-slot name="footer"> <x-filament::button style="float: right;" wire:click="submit()"> Submit </x-filament::button> </x-slot> </x-filament::modal>

This is the form:

public function form(Form $form): Form { return $form ->schema([ \Filament\Forms\Components\TextInput::make('test_field')->required() ]); }

This is the submit function:

public function submit(): void { // Validate the data $validatedData = $this->form->validate(); }

There is also a button to open the modal on click:

x-on:click="$dispatch('open-modal', {id: 'test'})"

Issue

When I open the modal and click anywhere outside the modal, or on the close icon in the top right corner, the modal closes as expected.

However, if I open the modal, leave the TextInput field blank, and click Submit, the submit button shows a spinning icon and then displays a validation error message. After the validation message is displayed, if I try to close the modal, it does not close.
Was this page helpful?