Selected Component does not update when options contain only icons

[TobiasNagel01]

Flux version

v2.9.0

Livewire version

v3.7.0

Tailwind version

v7.1.16

Browser and Operating System

Chrome on MacOS

What is the problem?

When I use a select box with Icons, exactly as described in the docs and remove all text from the options, the placeholder Icon does not update anymore when selecting a different option. It does work with any text (except spaces), the only case that is not working is with icons only.

Use Case:
I want to create a dropdown of only Icons

Code snippets to replicate the problem

This works:

<flux:select variant="listbox" placeholder="Select role...">
        <flux:select.option>
            <div class="flex items-center gap-2">
                <flux:icon.shield-check variant="mini" class="text-zinc-400" /> Owner
            </div>
        </flux:select.option>
        <flux:select.option>
            <div class="flex items-center gap-2">
                <flux:icon.key variant="mini" class="text-zinc-400" /> Administrator
            </div>
        </flux:select.option>
        <flux:select.option>
            <div class="flex items-center gap-2">
                <flux:icon.user variant="mini" class="text-zinc-400" /> Member
            </div>
        </flux:select.option>
        <flux:select.option>
            <div class="flex items-center gap-2">
                <flux:icon.eye variant="mini" class="text-zinc-400" /> Viewer
            </div>
        </flux:select.option>
    </flux:select>

This does not work:

<flux:select variant="listbox" placeholder="Select role...">
        <flux:select.option>
            <div class="flex items-center gap-2">
                <flux:icon.shield-check variant="mini" class="text-zinc-400" />
            </div>
        </flux:select.option>
        <flux:select.option>
            <div class="flex items-center gap-2">
                <flux:icon.key variant="mini" class="text-zinc-400" />
            </div>
        </flux:select.option>
        <flux:select.option>
            <div class="flex items-center gap-2">
                <flux:icon.user variant="mini" class="text-zinc-400" />
            </div>
        </flux:select.option>
        <flux:select.option>
            <div class="flex items-center gap-2">
                <flux:icon.eye variant="mini" class="text-zinc-400" />
            </div>
        </flux:select.option>
    </flux:select>

Screenshots/ screen recordings of the problem

I selected the option with the key Icon, but the select field still shows the shield icon.

How do you expect it to work?

I would expect the icon to change, just like it does when I include text.

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.

[jeffchown]

@TobiasNagel01 Have you tried using the value attribute? (see https://fluxui.dev/components/select#fluxselectoption)
e.g. changing your code to:

<flux:select variant="listbox" placeholder="Select role...">
    <flux:select.option value="check">
        <div class="flex items-center gap-2">
            <flux:icon.shield-check variant="mini" class="text-zinc-400" />
        </div>
    </flux:select.option>
    <flux:select.option value="key">
        <div class="flex items-center gap-2">
            <flux:icon.key variant="mini" class="text-zinc-400" />
        </div>
    </flux:select.option>
    <flux:select.option value="user">
        <div class="flex items-center gap-2">
            <flux:icon.user variant="mini" class="text-zinc-400" />
        </div>
    </flux:select.option>
    <flux:select.option value="eye">
        <div class="flex items-center gap-2">
            <flux:icon.eye variant="mini" class="text-zinc-400" />
        </div>
    </flux:select.option>
</flux:select>