Unable to set tags with multiple options on initial load

[jordanhavard]

Hi @MoamenEltouny 👋

I'm having trouble with the data-tags setting themself when the livewire component is loaded. (My specific implementation is inside a livewire bootstrap modal)

I believe I've set it up correctly as the element does update the DB when I save the selections with either 1 or multiple tags selected.

My snippet is below

<div wire:ignore>
<select
        data-parent=".modal-body"
        class="form-select"
        data-pharaonic="select2"
        data-component-id="{{ $this->id }}"
        wire:model="request.aircraft"
        style="width: 100%"
        multiple
        data-tags
>
    @foreach($aircrafts as $aircraft)
        <option value="{{$aircraft->aircraft_icao}}">{{$aircraft->short_name}}
            ({{$aircraft->aircraft_icao}})
        </option>
    @endforeach
</select>
</div>

schedule.aircraft is B738 however this tag is not being "selected" during initial load. Where it gets strange is when I select a new tag (e.g. A320), the B738 is now selected in addition to the newly selected A320 tag.

Let me know if you need me to explain anything further

TIA

[jordanhavard]

I ended up getting this to work by doing the following

using the @selected blade directive and using wire:model.defer instead.