Having TextInput in CreateAction breaks closing modals by clicking outside
Hi! I have a livewire-component where i have built a filament form. Clicking the "Add new"-button in the top opens a modal, and i can close it by clicking escape, close-button or the X in the top right corner so thats great. But i cant make it close by clicking outside the modal - this should be standard behavior from the Filament docs.
The delete-modal works as expected and closes when i click outside it.
Here is the code:
`
If i remove the ->form code and the TextInput etc that follows in the code so i just have a empty modal, then i can close it by clicking outside the modal, so somethings seems to break when i have forms in the modals?
3 Replies
Also just did some more testing by adding ->disabledForm() under the ->form, and that makes the modal work as expected where you can close it by clicking outside.
So there is some kind of issue with the forms in the modal i guess.
I tried to remove all the TextInput in the ->form - and only keep the FIleUpload. Then the modal works also, so there is something with TextInput causing this.
Let me know if there is any other info i can provide, or if you have any ideas on how i can troubleshoot this further! First my idea was that something else on the site "disturbs" when clicking away on Filament-modals, but since it works when i dont have any fields in the modals, im not sure thats the case.
Are you using a modal form?
https://filamentphp.com/docs/3.x/actions/modals/#modal-forms
I'm using this one:
https://filamentphp.com/docs/3.x/actions/prebuilt-actions/create#overview
Here is how i built it:
CreateAction::make()
->label(__('wedding_page.add_gift'))
->modalHeading(__('wedding_page.add_gift'))
->modalSubmitActionLabel(__('wedding_page.create_gift'))
->disableCreateAnother()
->form([
TextInput::make('title')
->required()
->label(__('wedding_page.gift_title')),
TextInput::make('description')
->label(__('wedding_page.gift_description')),
TextInput::make('link')
->url()
->label(__('wedding_page.gift_link')),
FileUpload::make('image')
->image()
->disk('public')
->directory('wedding_gifts')
->label(__('wedding_page.gift_image'))
->imageEditor()
->columnSpanFull(),
])
->using(function (array $data): WeddingGift {
if (!$this->publicPage) {
throw new \Exception(__('wedding_page.no_public_page'));
}
$gift = $this->publicPage->weddingGifts()->create($data);
return $gift;
})