Bootstrap Select Not Working After Laravel Livewire Render

I have a Bootstrap selectpicker element that works fine on the first render. It's initialized with: $(document).ready(function () { $('select').selectpicker(); }); But after l

Solution 1:

in case anyone else gets stuck with this here is how you do it.

<div wire:ignore id="for-bootstrap-select">
     <select class="form-control" data-container="#for-bootstrap-select">
         @foreach($data as $item)
            <option value="{{ $item->id }}">{{ $item->name }}</option>
         @endforeach
     </select>
</div>

Reason from the creator of livewire himself: Caleb!

Solution 2:

Just add wire:ignore on your html input/select tag

Solution 3:

If some one still seeking form answer. adding wire:ignore is a bad idea, because then you cannot dynamicly change options, for example having select country, and then dynamicly change select city according to country. To get rid of wir:ignore, you can use this out side your component.

<script>
document.addEventListener("DOMContentLoaded", () => {
    Livewire.hook('message.received', (message, component) => {
        $('select').selectpicker('destroy');
    })
});

window.addEventListener('contentChanged', event => {
    $('select').selectpicker();
});</script>

and

$this->dispatchBrowserEvent('contentChanged');

on your component.

selectpicker cannot be rendered on the same select, that why 'refresh' or 'render' doesn`t work even in console. You need to destroy it firest.

Solution 4:

I think, you are reinitializing your selectpicker everytime you update the dom. that is why whenever you are using

 $('select').selectpicker('refresh'); 

inside your livewire hook, its basically refreshing the fresh initialized selectpicker in your dom. I'm guessing it, because as per your code and statement above it should work unless behind the scene something wrong happen like I mentioned.

I dont know if I make sense. please check either you are reinitializing it before refreshing. let me know

Solution 5:

Try

$('.selectpicker').selectpicker('refresh');

I know this is practically the same as yours but in my case, not all selects were bootstrap-selects, so targeting just the class of .selectpicker seemed to have the desired effect. Could be a red herring, but worked for me.