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:

->headerActions([
                CreateAction::make()
                    ->label(__('wedding_page.add_gift'))    
                    ->modalHeading(__('wedding_page.add_gift'))
                    ->modalSubmitActionLabel(__('wedding_page.create_gift'))
                    ->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 {
                        $gift = $this->publicPage->weddingGifts()->create($data);
                        return $gift;
                    }),
            ]);

->headerActions([
                CreateAction::make()
                    ->label(__('wedding_page.add_gift'))    
                    ->modalHeading(__('wedding_page.add_gift'))
                    ->modalSubmitActionLabel(__('wedding_page.create_gift'))
                    ->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 {
                        $gift = $this->publicPage->weddingGifts()->create($data);
                        return $gift;
                    }),
            ]);

`

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?

AzkaOP•9/10/24, 1:14 PM

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.

AzkaOP•9/11/24, 7:29 AM

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.

AAzka Let me know if there is any other info i can provide, or if you have any ideas o...

LeandroFerreira•9/11/24, 8:19 AM

Are you using a modal form?

https://filamentphp.com/docs/3.x/actions/modals/#modal-forms

Modals - Actions - Filament

LLeandroFerreira Are you using a modal form? https://filamentphp.com/docs/3.x/actions/modals/#mo...

AzkaOP•9/11/24, 9:07 AM

I'm using this one:
https://filamentphp.com/docs/3.x/actions/prebuilt-actions/create#overview

Here is how i built it:

Create action - Actions - Filament