Catch Next/Previous Step Exceptions and redirect aways

[StanBarrows]

Heyhey,

Sometimes I've issues with the consistency of the PreviousStep & NextStep states that I'm using to display the buttons within my navigation for the previous or next step. This leads to hat users can click on a button event if there is no previous or next component.

I never was able to reproduce it with my local system or during testing on the actual environments, but I have a few error logs running into this issue.

I'm trying to catch those exceptions and redirect the users to the start page without rendering the modal-like error messages.

• NoNextStep::make(self::class, $this->currentStepName);
• NoPreviousStep::make(self::class, $this->currentStepName);

If I try to catch it within the Exception Handler, it throws the following Middleware errors. Any idea how I can achieve this?

Argument #2 ($response) must be of type Symfony\Component\HttpFoundation\Response, Livewire\Redirector given, called in

$this->renderable(function (NoPreviousStep $e, $request) {
return redirect()->route('start.index');
});

The current workaround is to override the WizardComponent and return before the exceptions are thrown.

if (! $previousStep) {
    return;
    //throw NoPreviousStep::make(self::class, $this->currentStepName);
}

[rabol]

I have the same issue on my production site

Did you find a better solution ?

[rabol]

just as a note: I got this information from a tester: they click the 'next' button MANY times and then the page change.
So what I think is that somehow the wizard try to go to the next->next->next

[ju5t]

I think this can happen if a user presses the button multiple times before the user's being shown the next step. Requests can pile up, as they're XHR calls through Livewire and happen in the background.

The solution for this would be to disable the button as soon as it's pressed and enable it again if any errors occur. If there is a clean way to do this inside the package you could perhaps submit a PR.

[rabol]

I am trying, but….

If I disable the button before $this->validate() and the validation fails, then the button keeps being disabled

so I don’t know how to solve this

[ju5t]

I'm not sure if this would work, as I didn't test it, it's just a thought. I don't think there are any weird side-effects, there might be but I can't test this right now.

You can try and replace $this->validate() with:

$this->withValidator(function (Validator $validator) {
    $validator->after(function ($validator) {
        $this->dispatchBrowserEvent('validated');
    });
})->validate();

This should fire a browser event after the validation. You can use JS to listen for the event and set the button back to active.

[rabol]

For me the 'solution' was easy as I use WireUI and they have a 'Spinner' property on the button and that seems to 'fix' the issue

[ju5t]

Completely forgot about that. The 'native' Livewire solution for this would be:

wire:loading.delay.longer.attr="disabled"

I set the delay to longer, this is 500ms, it's to prevent flickering.

See: https://laravel-livewire.com/docs/2.x/loading-states