Livewire with nice select

Nice Select is a lightweight jQuery plugin that replaces native select elements with customizable dropdowns. I wanted to make a reactive dropdown with livewire and using the nice select plugin. But it wasn't working as expected. Livewire was not able to bind the <select> to a property.

This happened because nice select is a jQuery plugin and emits jQuery events, and not native DOM events. Livewire normally listens for a native change event when wire:model is attached to an element.

To make this work what I end up doing was to register an event listener manually. It was done like so:

 <div wire:ignore>
<select class="nice-select">
  <option data-display="Select">Nothing</option>
  <option value="1">Some option</option>
  <option value="2">Another option</option>
  <option value="3" disabled>A disabled option</option>
  <option value="4">Potato</option>
</select>

</div>
    
@section('js')
<script>
    $(document).ready(function() {
        $('.nice-select').niceSelect();
        $('.nice-select').on('change', function (e) {
            @this.set('selectedModel', e.target.value);
        });
    });
</script>
@endsection

So right now everytime the select element changes livewire will recieve the event and set the $selectedModel property to the value of the select element. And also to tell Livewire to skip the DOM-diffing for certain parts of the DOM I used wire:ignore directive on the parent div.