<template x-if> inside combobox select causes options to disappear after selection

[bobik1337]

Flux version

v2.11.1

Livewire version

v4.0.2

Tailwind version

v4.0.7

Browser and Operating System

Chrome on Windows

What is the problem?

When using <template x-if> inside flux:select with variant="combobox", options outside the template disappear after selecting any option.

Initial state: All 5 options are visible when the select is opened.

After selecting an option outside the template (e.g., "1st option"): All options outside the template disappear. Only the selected option and options inside <template x-if> remain visible.

After selecting an option inside the template (e.g., "5th option"): All options outside the template disappear. Only options inside <template x-if> remain visible, and "Nothing found" message appears.

This bug appeared starting from Flux v2.10.0 and persists in v2.11.1. Version v2.9.2 works correctly.

This issue may be related to #2334 (clearable button issue).

Code snippets to replicate the problem

<flux:select
    variant="combobox"
    clearable
    placeholder="Select a group..."
    x-data="{ optionsVisible: false }"
    x-on:open="optionsVisible = true"
    x-on:close="optionsVisible = false"
>
    <flux:select.option value="1">1st option</flux:select.option>
    <flux:select.option value="2">2nd option</flux:select.option>
    <flux:select.option value="3">3rd option</flux:select.option>
    <flux:select.option value="4">4th option</flux:select.option>

    <flux:separator />
    
    <template x-if="optionsVisible">
        <div>
            <flux:select.option value="5">5th option</flux:select.option>
        </div>
    </template>
</flux:select>

Note:

• Removing x-if from the template causes the 5th option to never display.
• Removing the <div> wrapper inside <template> causes only the first option to display. The wrapper is necessary for x-if to work properly.
• Replacing <template> with <div> works correctly, but this is not acceptable in my case for performance reasons as it loads unnecessary DOM elements.

Screenshots/ screen recordings of the problem

Screen.Recording.25.01.2026.6-32-29.mov

How do you expect it to work?

All options should remain visible after selecting any option. The <template x-if> should conditionally render the 5th option without affecting the visibility of other options in the select dropdown.
Also 'Nothing found' should not render if options from <template x-if> are selected.

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I have provided code samples as text and NOT images.
• I understand my bug report will be closed if I haven't met the criteria above.

[ganyicz]

Hi @bobik1337,

thanks for reporting!

I've submitted a PR with a potential fix.

[bobik1337]

Update after v2.12.0 fix:
The behavior has changed slightly, but the core issue with x-if templates persists.

Code snippets to replicate the problem

<flux:select
    variant="combobox"
    clearable
    placeholder="Select a group..."
    x-data="{ optionsVisible: false }"
    x-on:open="optionsVisible = true"
    x-on:close="optionsVisible = false"
    class="max-w-120"
>
    <flux:select.option value="1">1st option</flux:select.option>
    <flux:select.option value="2">2nd option</flux:select.option>
    <flux:select.option value="3">3rd option</flux:select.option>

    <flux:separator />
    
    <template x-if="optionsVisible">
        <div>
            <flux:select.option value="4">4th option</flux:select.option>
            <flux:select.option value="5">5th option</flux:select.option>
            <flux:select.option value="6">6th option</flux:select.option>
        </div>
    </template>
</flux:select>

<flux:select
    variant="combobox"
    clearable
    placeholder="Select a group..."
    x-data="{ optionsVisible: false }"
    x-on:open="optionsVisible = true"
    x-on:close="optionsVisible = false"
    class="max-w-120"
>
    <template x-if="optionsVisible">
        <div>
            <flux:select.option value="1">1st option</flux:select.option>
            <flux:select.option value="2">2nd option</flux:select.option>
            <flux:select.option value="3">3rd option</flux:select.option>
            <flux:select.option value="4">4th option</flux:select.option>
            <flux:select.option value="5">5th option</flux:select.option>
            <flux:select.option value="6">6th option</flux:select.option>
        </div>
    </template>
</flux:select>

First select (mixed options - some outside x-if, some inside):

• Initial open: works correctly, all options visible
• Selecting any of the first 3 options (outside x-if) → on reopen: shows ONLY the selected option (other options outside x-if are also hidden!)
• Selecting any of the last 3 options (inside x-if template) → on reopen: shows "No results found" + selected option
• Clearing the input → all options become visible again

Second select (all options inside x-if):

• Initial open: shows "No results found" even though no option is selected yet
• Selecting any option → on reopen: shows "No results found" + selected option
• Clearing the input → all options become visible again

The critical issue: The mere presence of x-if anywhere inside the select breaks the filter mechanism for ALL options, even those outside the x-if template. The combobox filter appears to:

• Index options during initialization (missing options inside x-if)
• Not re-index when x-if adds/removes options from DOM
• Get into an inconsistent state where it filters out even the initially indexed options on reopen

Screen.Recording.10.02.2026.16-09-22.mov

[joshhanley]

@bobik1337 the fix hasn't been merged yet, hence why this issue is still open 🙂