Livewire

Issue with Laravel Spatie Wizard and Select2

Hi,

I’m encountering an issue while using the Laravel Spatie Wizard package along with Select2. The Select2 component works fine on the initial step, but when I move to step 2 and then return to the first step, Select2 doesn’t render correctly. Instead, the <select> field appears as a default HTML select element, losing the Select2 functionality.


<div wire:ignore> 
    <select class="js-example-basic-single" name="state"> 
         <option value="AL">Alabama</option> 
         <option value="WY">Wyoming</option> 
    </select> 
</div> 
<script>
 $(document).ready(function() { $('.js-example-basic-single').select2(); }); 
</script>
kuba323
kuba323
0
1
220
alex Member
alex
Moderator

This is a classic issue with re-rendering if you're using a selector like this. You might consider turning this into an Alpine plugin so it plays nicely with it.

Here's an example I found:

https://codepen.io/hugodf/pen/NWGbvxx

Alternatively, there's a paid solution here with Alpine Components:

https://alpinejs.dev/component/select2

Let me know if you get stuck with either solution and I'd be happy to help!