© 2026 Hedgehog Software, LLC

TwitterGitHubDiscord
More
CommunitiesDocsAboutTermsPrivacy
Search
Star
Setup for Free
FilamentF
Filament•2y ago•
4 replies
Azka

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?
Filament banner
FilamentJoin
A powerful open source UI framework for Laravel • Build and ship admin panels & apps fast with Livewire
20,307Members
Resources
Was this page helpful?

Similar Threads

Recent Announcements

Similar Threads

Closing modals
FilamentFFilament / ❓┊help
3y ago
Rules in TextInput breaks server.
FilamentFFilament / ❓┊help
3y ago
Page scroll disabled after closing nested modals
FilamentFFilament / ❓┊help
3y ago