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•8mo ago

I have a similar use case that I need to disable action upon validation

devpoolxxOP•8mo ago

I am losing my head on finding solution for this one 😓

Anish•7mo ago

Did you find a solution to this?

Solution

Anish•7mo 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.

devpoolxxOP•7mo ago

@Anish Thank you so much! this worked on my end!

Anish•7mo ago

Glad it worked

Gaming

Programming

How to close action confirmation modal after form validate fails?