Livewire select2 or selectpicker

I cant use select2 or selectpicker js libraries with Livewire. Select2 and selectpicker libraries are destroyed after form submit action. If the validation is incorrect after submitting the form, the libraries templates on form elements disappears.

Does anyone have a suggestion why am I having this problem?

neilstee

5 years ago

Level 34

@moriarty for other plugins to work with Livewire, you need to tell Livewire to on specific elements like this:

<div>
    <div wire:ignore>
        <select class="select2" name="state">
            <option value="AL">Alabama</option>
            <option value="WY">Wyoming</option>
        </select>

        <!-- Select2 will insert its DOM here. -->
    </div>
</div>

@push('scripts')
<script>
    $(document).ready(function() {
        $('.select2').select2();
    });
</script>
@endpush

Source: https://laravel-livewire.com/docs/2.x/alpine-js

1 like

moriarty

5 years ago

Level 1

I tried it like this, it works, but the selected data in the selection box is not sent after submitting the form. The return value is null. How can I fix this?

neilstee

5 years ago

Level 34

@moriarty since you ignore the whole div, it won't really listen to any event that is fired.

My suggestion is to add an event listener to your Livewire so when it is submitted, you retrieve all the values on your select2 component before you send it.

Event Listener: https://laravel-livewire.com/docs/2.x/events#event-listeners
Retrieve Data: https://select2.org/programmatic-control/retrieving-selections#using-the-data-method

moriarty

5 years ago

Level 1

I did not use wire:ignore. Select box change is not detected and a null value is returned.

neilstee

5 years ago

Level 34

@moriarty you need to use the wire:ignore for your select box to work. But the problem is, since Livewire ignores this, it won't pick up any change events that is why you need to add event listeners on Livewire and retrieve the select2 data from there like I said.

Please or to participate in this conversation.