Hide Wizard Action buttons using x-bind:class instead of x-show so it…

[Jessedev1]

… works with hidden Steps

There was a bug with the action buttons in a wizard. When the last step of a wizard was hidden and then becomes visible, the submit button stays visible while it should be replaced by the next button.

This is due to an issue with x-show. Replacing it with x-bind:class makes it react to the changes correctly.

When the hidden step became visible, users were unable to proceed to the next step using the action buttons.

Functional changes

Updated the way action buttons are displayed in the Wizard component.

• Code style has been fixed by running the composer cs command.
• Changes have been tested to not break existing functionality.
• Documentation is up-to-date.

[danharrin]

Can you explain the issue with x-show please, is it an Alpine.js bug?

[Jessedev1]

@danharrin
It looks like an issue with Livewire and Alpine.js 3.
The x-show property is not reactive when used with external components (like those from Livewire).

I've searched the internet and found others experiencing the same issue. This seems to be the only available fix. So far, neither Alpine nor Livewire have released a solution for this.

I've already posted this in the Discord server, and another developer confirmed having the same issue: Discord link.

[danharrin]

Thanks