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.37 Replies
Has anyone got any ideas?
Any errors in the dev console?
Can’t imagine why livewire would just stop working unless alpine is somehow erroring out.
Thanks for the response, just having a look now, bear with me
No rush.
Nope, no errors. Even when clicking the close popup button.
The click method is still there.
I'll have a look to see what it looks like, before I click the "Submit" button.
The issue of not closing the popup button, only occurs when clicking the "Submit" button.
Appears to be identical
Do you have any of the filament views published?
Sorry, how do you mean published?
Can you run
php artisan about —filament
It’s 2 -
Try —only=filament
Yep, you have views published.
What does this show me, out of curiosity?
If you don’t actually need to override any of the views and don’t want to manually keep them up to date with each release then they shouldn’t be published.
I’m guess there is something missing in one of those views in your app that is breaking the functionality.
Would it help if I create a sample page and my custom column, and send it over here?
Nope, easy fix is to just delete resources/views/vendor/filament. But make sure they aren’t actually needed if you are working on a team project.
One moment
It is never recommended to publish any views from packages unless absolutely necessary and you know what you are doing.
In the directory you have specified, I only have one component in there called brand.blade.php. Which is just an image element, that is not releated to this issue.
Ok. Maybe that’s what it’s reporting then. Definitely something to note on our side.
Could be a bug then. Honestly can’t think of why a validation error would prevent a modal from closing.
Can you setup a minimum reproduction repo? I could look into it further. Or file an issue on github.
I was just thinking that, yes sure. I'll create a minimum reproduction repo.
Maybe someone will come along too and see something in your code that might be the problem.
Hopefully 🙂 I'll let you know once I have it ready
Got one created 🙂
Here is the repo
https://github.com/98gzi/Filament-Issue
I have some test data, please ensure to run the database seeders:
php artisan db:seedGitHub
GitHub - 98gzi/Filament-Issue
Contribute to 98gzi/Filament-Issue development by creating an account on GitHub.
Will check it in the morning.
Thank you
I wonder if, when a validation error occurs, the Livewire component might be re-rendering, which can cause the modal to lose its open state?
Hey @Ed sorry for the delayed response.
Here's the situation, it seems like you are getting a little confused on how actions work in relation to livewire components.
Try this and remove the modal from your view. Might give you a better idea.
Hi @awcodes, thanks for your answer and no problem on the delay!
I’ve given your suggestion a try. However, it’s causing some bugs (please see the attached recording).
Initially, a modal opens and closes as expected, but when I try to open it a second time, a grey overlay appears on the screen without showing the popup.
The original code I have is almost what I need, apart from the issue of the modal not closing after validation.
The sample provided is a very basic example, but it would be very useful in our project.
The idea is to have a column that displays blocks of data (see the attached screenshot image.png), and each block should be clickable to show a modal.
I’m unsure if the approach you provided will work, as each block in the column needs to be uniquely identified. The current code:
is only adding an action for the entire column, not for each individual block within the column.
Hope this makes sense!
I think an alternative solution I can try is to dynamically create columns, rather than generating the data within a single column.
Well the biggest problem is that you are trying to do a form directly inside of a table and that won’t work. You may have to have separate livewire components that you can call in another way.
@awcodes are nested tables a possibility of being a feature in filamentphp in the future?
I wouldn’t think so. The closest thing at the moment is grouping.
I think what you are trying to do is possible, it will just need to be handled from a different approach.
I'll keep trying different approaches, like you mentioned a seperate livewire component.
I'll keep you updated on here once I have a working solution, may be useful for someone in the future.
Figured what the issue is!
When I validate the data, the component re-renders, causing the
modalId to generate a new unique value.
Not a filament issue, this is my error!! -_-