Headless Listbox crashing with minor customisation

[jardakotesovec]

Would like to use headless listbox. Unfortunately very minor customisation is causing it to crash.

Its exactly the same as the example on the website (https://alpinejs.dev/component/headless-listbox), only difference is adding that getter filteredFrameworks to remove currently selected framework from the list of options.

Here is the reproduction - https://jsfiddle.net/0fanjg27/ .

Any suggestion how to work around it or ideally fix that bug?

[ekwoka]

Basically, since you're filtering like that, the element won't be in the listbox anymore, so it won't have the refs.

I'd recommend for such a case, to just use an x-show on the options.

[jardakotesovec]

@ekwoka Hi, thanks for response.

If I select something I would expect that focus would be triggered on the the listbox button (x-listbox:button), not on the item (x-listbox:option). Even the name refs suggests its triggering focus on the button.

Am I missing something here?

[ekwoka]

But the focus is triggered FROM the listbox option is the issue.

It does it on the next tick, which results in that element being removed and cleaned up (mostly) before it runs.

Not exactly sure why it does it that way, but it does.

[jardakotesovec]

@ekwoka Alright, thanks a lot for help!