Select (x-select) looses all options after being disabled and again enabled afterwards

[tariktokic]

Describe the bug When using the <x-select> component and disabling and enabling it later again, all options from the :options are gone.

To Reproduce Steps to reproduce the behavior:

1. Create the component like this:

                       <x-select
                           :options="$listOfYears"
                           wire:model.lazy="year"
                           required
                           label="Year"
                           :disabled=$yearIsDisabled
                       />

   where the list of years is $this->listOfYears = [(int)date('Y')-1, (int)date('Y'), (int)date('Y')+1]; and $this->yearIsDisabled=false.

2. Set $this->yearIsDisabled=true.

3. Set $this->yearIsDisabled=false.

Expected behavior After enabling the component I can select new options. Unfortunately they are all gone.

Dependencies

• WireUI Version: 1.17.9
• Laravel Version: 10.9.0
• Alpine.js Version: 3.10.3
• Livewire Version: 2.12.3
• Lang: en_US

Desktop (If applicable, please complete the following information):

• OS: macOs
• Browser: chrome

[spardobo]

I'm having the same issue, is there any workaround for this?

[rivalex]

Same problem here ... maybe a refresh() or redraw() method will be useful. thanks in advance.

[misenhei]

To force the options to be rebuilt after disabling you can randomize wire:key to have Livewire rebuild:

<div wire:key="{{ 'x-select-year-' . rand() }}"
   <x-select
         :options="$listOfYears"
         wire:model.lazy="year"
         required
         label="Year"
         :disabled=$yearIsDisabled
    />
</div>