Livewire Select List not retaining selection

I'm pulling my hair out on this one. Because the use case is so simple, it tells me there's something else happening on the page I'm not able to track down.

Blade is simple:

<select wire:model="options">
   <option value="0">Option 0</option>
   <option value="1">Option 1</option>
</select>
{{ var_dump($options) }}

The component is simple as well:

public $options;
public function mount()
{
   $this->options = '0';
}

Upon page load, Option 0 is selected and my var_dump displays string(1) "0" as expected..

But the moment I change the selection, the dropdown defaults to an empty / blank value.

Both options are still in the list AND my var_dump correctly displays the value of the item I selected. But the selected item doesn't appear as selected.

There are several other livewire components on the same page... all of which seem to be working fine. I've even tried moving this exact code to another (existing) component and the behavior is consistent.

The wiring seems to work but the visuals are out of whack.

What am I missing? Any ideas on where to look next?

Nakov

4 years ago

Best Answer

Level 73

Try adding wire:ignore to the parent tag of that select element ? I experienced the same once and this fixed it, not ideal but I believe having another components on the same page causes the issue.

This is what I mean:

<div wire:ignore>
<select wire:model="options">
   <option value="0">Option 0</option>
   <option value="1">Option 1</option>
</select>
</div>

You could also check this: https://laravel-livewire.com/docs/2.x/troubleshooting

So try adding wire:key to the options.

4 likes

dpower

4 years ago

Level 1

Amazing, @nakov!!!

That did the trick nicely. I don't completely understand why... but I'll check out the troubleshooting link you shared.

Thank you!

NoTimeForCaution

2 years ago

Level 24

Just used this solution! Thanks @nakov!

brussellprogramming

1 year ago

Level 1

When looking at the HTML on the page, are the attributes title and data-original-title added to any <option> elements?

If so, Livewire may be having a negative interaction with Bootstrap. You can get rid of the error by getting rid of those attributes in the elements.

I had the same issue, and unfortunately I couldn't use wire:ignore since I really needed the option tags to update. What worked for me is adding this script to my component view:

document.addEventListener('livewire:load', function () {
    Livewire.hook('message.processed', (message, component) => {
        // Select all option elements within the updated component
        const optionElements = component.el.querySelectorAll('option');
        // Loop through each option element and remove the specified attributes
        optionElements.forEach(option => {
            option.removeAttribute('data-original-title');
            option.removeAttribute('title');
        });
    });
});

Please or to participate in this conversation.