Столкнулся с такой интересной проблемой, есть компонент select-color
@props(['width' => "w-48", 'data' => [], 'disabled' => 'false'])
<div x-data="{ open: false, selectedOption: @entangle($attributes->wire('model')).live, data: {{ json_encode($data) }} }" class="relative mt-1">
<button
x-on:click="open = !open"
type="button"
:disabled="{{ $disabled }}"
class="flex items-center justify-between px-4 py-2.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:ring-2 focus:ring-blue-600 {{ $width }}"
>
<span x-text="selectedOption || 'Выберите цвет'" class="truncate"></span>
<svg
class="w-5 h-5 ml-2 -mr-1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"
/>
</svg>
</button>
<div
x-show="open"
x-on:click.away="open = false"
x-cloak
class="absolute z-10 mt-2 bg-white rounded-md shadow-xl {{ $width }} max-h-40 overflow-y-auto"
>
<ul class="py-1 text-sm font-medium text-gray-700 ring-1 ring-black ring-opacity-5 rounded-md">
@foreach ($data as $key => $value)
<li
x-on:click="selectedOption = '{{ $value }}'; open = false;"
class="px-4 py-2 border-b hover:bg-gray-100 cursor-pointer"
:class="selectedOption == '{{ $value }}' ? 'bg-gray-200 hover:bg-gray-200' : ''"
>
{{ $value }}
</li>
@endforeach
<li
class="px-4 py-2 border-b hover:bg-gray-100"
>
<x-input type="text" class="w-full text-sm" x-model="selectedOption" placeholder="Или введите цвет" />
</li>
</ul>
</div>
</div>
если я попытаюсь пробросить в него массив, по типу
<x-dashboard.select-color id="color" :data="[1 => 'серый', 2 => 'красный']" wire:model='animalForm.animal_color_id' width="w-full" />
то все работает отлично, но стоит мне динамически уже после загрузки всего сайта подгрузить массив туда, типо
<x-dashboard.select-color id="color" :data="$categoryColors" wire:model='animalForm.animal_color_id' width="w-full" />
то в итоге при нажатии на li элмент, open = false, даже через консоль посмотрел, но элемент не исчезает, может кто знает почему так
