Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI 
SELECT2 Livewire
<select class="form-select form-select-solid" data-control="select2"
data-close-on-select="false"
data-placeholder="Select an option"
data-allow-clear="true"
data-hide-search="true"
wire:model="lead"
>
@foreach($this->users as $user)
<option value="{{ $user->name }}">{{ $user->name }}</option>
@endforeach
</select>I'm having this issue with Select2 where the selected value is not being sent to the attribute in the component, even though I have the `wire:model` set. How can I make it work?
Replies (2)
The problem here is that Select2 doesn’t play nicely with Livewire’s wire:model by default because Select2 initializes separately from Livewire’s DOM updates.
@block blast
hi Alex,
In Livewire, using wire:model with Select2 doesn't work out-of-the-box due to the way Select2 initializes. It creates a separate element for the Select2 UI, while hiding the original select dropdown. However, you can implement a workaround to ensure the change event is passed to the Livewire model variable. Here's how to do it:
<select class="form-select form-select-solid" data-control="select2"
data-close-on-select="false"
data-placeholder="Select an option"
data-allow-clear="true"
data-hide-search="true"
>
@foreach($this->users as $user)
<option value="{{ $user->id }}">{{ $user->name }}</option>
@endforeach
</select>
@script
<script>
$("#select2_item").on("change", function(e) {
var data = $(this).select2("data");
Livewire.emit("change.item", data);
});
</script>
@endscriptIn your Livewire component:
protected $listeners = [
"change.item" => "updateItem"
];
public $lead;
public function updateItem($property)
{
$this->lead = $property["id"];
}
