F
Filament•9mo ago
devpoolxx

How to close action confirmation modal after form validate fails?

I have a custom livewire component that has a form with rules and submit action. 
public function submitAction(): Action
    {
        return Action::make('submit')
            ->button()
            ->icon('heroicon-s-plus-circle')
            ->label('Add talent profile')
            ->requiresConfirmation()
            ->action(function () {
                $this->validate();
            });
    }
public function submitAction(): Action
    {
        return Action::make('submit')
            ->button()
            ->icon('heroicon-s-plus-circle')
            ->label('Add talent profile')
            ->requiresConfirmation()
            ->action(function () {
                $this->validate();
            });
    }
The problem is when there are validation errors, I cannot close this confirmation modal automatically.
Solution:
I found a way to close the modal window - after the confirmation button is clicked. Here is my action ``` public function myAction(): Action {...
Jump to solution
6 Replies
kool
kool•9mo ago
I have a similar use case that I need to disable action upon validation
devpoolxx
devpoolxxOP•9mo ago
I am losing my head on finding solution for this one 😓
Anish
Anish•9mo ago
Did you find a solution to this?
Solution
Anish
Anish•9mo ago
I found a way to close the modal window - after the confirmation button is clicked. Here is my action 
public function myAction(): Action
    {
        return Action::make('my-action')
            ->label($this->actionButtonLabel)
            ->size(ActionSize::Large)
            ->icon($this->actionIcon)

            ->extraAttributes([
                'title' => $this->actionButtonLabel,
            ])
            ->requiresConfirmation()
            ->modalIcon($this->actionIcon)
            ->modalHeading($this->actionButtonLabel)
            ->modalDescription($this->confirmationText)
            ->modalSubmitActionLabel($this->confirmationSubmitButton)
            ->action(function () {
                $this->closeActionModal();
                $this->action();
            });
    }
public function myAction(): Action
    {
        return Action::make('my-action')
            ->label($this->actionButtonLabel)
            ->size(ActionSize::Large)
            ->icon($this->actionIcon)

            ->extraAttributes([
                'title' => $this->actionButtonLabel,
            ])
            ->requiresConfirmation()
            ->modalIcon($this->actionIcon)
            ->modalHeading($this->actionButtonLabel)
            ->modalDescription($this->confirmationText)
            ->modalSubmitActionLabel($this->confirmationSubmitButton)
            ->action(function () {
                $this->closeActionModal();
                $this->action();
            });
    }
This seems to work for me, if it passes validation, goes through the action. If it fails validation, the modal window is closed and shows validation window. Probably, naming could have been better! I guess that I should call it confirmedAction or something similar. I can put it in a trait and use it any place.
devpoolxx
devpoolxxOP•9mo ago
@Anish Thank you so much! this worked on my end!
Anish
Anish•9mo ago
Glad it worked

Did you find this page helpful?