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
    {
        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.

Jump to solution

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
    {
        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();
            });
    }

Jump to solution

How to close action confirmation modal after form validate fails?

How to close action confirmation modal after form validate fails?

Similar Threads

Similar Threads

Similar Threads