Combobox and listbox: Save optionKey in x-data to fix usage in Livewire

[gdebrauwer]

I created a listbox (or combobox) with options that are present in HTML and not generated by javascript.

<!-- in the blade file of a livewire component -->

<div>
    <button wire:click="$refresh" type="button">trigger livewire update</button>

    <div x-data="{ value: null }">
        <div x-listbox x-model="value">
            <button x-listbox:button>
                Select Framework
            </button>

            <ul x-listbox:options>
                <li :class="{
                    'text-blue-100': $listboxOption.isActive,
                    'text-yellow-100': !$listboxOption.isActive,
                    '!text-gray-60 opacity-50 cursor-not-allowed': $listboxOption.isDisabled,
                }" x-listbox:option value="laravel">
                    Laravel
                </li>

                <li :class="{
                    'text-blue-100': $listboxOption.isActive,
                    'text-yellow-100': !$listboxOption.isActive,
                    '!text-gray-60 opacity-50 cursor-not-allowed': $listboxOption.isDisabled,
                }" x-listbox:option value="rails">
                    Ruby on Rails
                </li>

                <li :class="{
                    'text-blue-100': $listboxOption.isActive,
                    'text-yellow-100': !$listboxOption.isActive,
                    '!text-gray-60 opacity-50 cursor-not-allowed': $listboxOption.isDisabled,
                }" x-listbox:option value="phoenix" :disabled="true">
                    Phoenix
                </li>
            </ul>
        </div>

        Selected: <span x-text="value"></span>
    </div>
</div>

When I use the listbox/combobox in a livewire component and a livewire update is triggered (by clicking the "trigger livewire update" button in the example above), then the following javascript warnings and errors occur:

When I debugged the issue, I discovered that the __optionKey on the option HTML element disappears after the Livewire update. To fix that, I updated the listbox/combobox code so that the "optionKey" is saved in the Alpinejs' x-data as that data will not be disappear after a Livewire update.

I did not add tests because I'm unsure how to test this as Livewire causes it.

This issue and another Livewire-related issue (livewire/livewire#7566) are currently the only 2 bugs preventing me from using the listbox/combobox in Livewire. I have tried to debug the other issue, but after many hours of searching, I have still not found what is causing the infinite loop.

[calebporzio]

Ok thanks for the extra context. I was able to reproduce this and can confirm your fix is good.

I added tests and found a couple problems with the current implementation, but a made a few tweaks and hopefully we're good now!

Maybe you can submit a failing test PR to Livewire for the other issue and we can tackle that as well? Thanks @gdebrauwer for the effort and contributions!

[gdebrauwer]

@calebporzio I created a PR with some failing tests: livewire/livewire#7776