How to Fix the “Laravel and Livewire change dropdown select style on click”

Using dropdown with css changed on click may change CSS style which looks somewhat awkward. There are many solution that not work with your codes.

When this happened with Laravel?

• Laravel with the Livewire component at rendering work.
• On clicking or on validation of the form or on re-load the form this unable to load the CSS.
• Without Livewire it work great but when working with Livewire and CSS this happen.
• Lets check out the easiest way to fixed this

How to fixed the issue with dropdown in Livewire and Laravel?

To fix this issue we need to make two changes to the Blade file and you will be surprised this work great.

in dropdown blade component just add wire:ignore in div section. for example just look at the below code:

<div wire:ignore >
 <div class="col-md-3 mb-1">
 <label class="form-label" for="select2-basic">Gender</label>
 <select class="hide-search select2 form-control"    id="gender"wire:model="gender" tabindex="0" aria-owns="select2-  select2-icons-results" aria-hidden="true" >
 <option value="">Select Gender</option>
 <option value="Female">Female</option>
 <option value="Male">Male</option>
 <option value="Other">Other</option>
 </select>
</div>

Once you add ignore in the DIV section livewire starts to ignore this will not send data to the controller and won’t change its CSS style.

To resolve this issue we need to add javascript to the blade file.

@push('scripts')
    <script>
        $(document).ready(function () {
            $('#gender').select2({
                    minimumResultsForSearch: -1
            });
            $('#gender').on('change', function (e) {
                var data = $('#gender').select2("val");
            @this.set('gender', data);
            });
        });
    </script>
@endpush

Adding the above js script fixed the issue now you can enjoy your css style without any errors.