Missing options in <flux:select> when “variant” is not specified

[MOA-TI]

Flux version

v2.0.3

Livewire version

v3.6.0

Tailwind version

v4.0.8

Browser and Operating System

Chrome and macOS

What is the problem?

When using flux:select without specifying the "variant" attribute, the options inside the component are not displayed. This issue occurs even though the options are correctly provided in the Blade template. Adding a "variant" explicitly resolves the problem, suggesting that the default behavior may not be working as expected.

Code snippets

    <flux:select wire:model.live="concepto_id"
                 label="Concepto"
                 required
                 descriptionTrailing="Sólo se muestran los conceptos activos para el trabajador."
                 placeholder="Buscar...">
        @foreach($conceptos as $k => $v)
            <flux:select.option :value="$k">{{ $v }}</flux:select.option>
        @endforeach
    </flux:select>

This code produces this output

If you explicitly define variant="default" in the flux:select tag (which is the default value), then the generated code is:

How do you expect it to work?

This worked perfectly in version 1.

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.

[joshhanley]

@MOA-TI thanks for reporting! I just tested this and it works fine in my test app. In future please make sure you include all Blade variables, ideally in a Volt class component, so we can just copy and paste it to test it. Your code was missing what $conceptos which meant it wouldn't run when I copied it.

I'm going to close this the code is working as expected for me, so there might be an issue in your component. If you manage to find a way for us to replicate the issue, we'd be happy to have a look to see if we can help. Just comment on this issue with the code and we can reopen it for you.

Volt component I tested with:

<?php

use Livewire\Volt\Component;

new class extends Component {
    public $items = [
        'item1' => 'Item 1',
        'item2' => 'Item 2',
        'item3' => 'Item 3',
    ];
}; ?>

<div>
    <flux:select wire:model.live="concepto_id"
                 label="Concepto"
                 required
                 descriptionTrailing="Sólo se muestran los conceptos activos para el trabajador."
                 placeholder="Buscar...">
        @foreach($items as $k => $v)
            <flux:select.option :value="$k">{{ $v }}</flux:select.option>
        @endforeach
    </flux:select>
</div>

[jeffchown]

@joshhanley I have had this happen to me when the select is in a modal. I will double-check and provide a Volt component tomorrow if I can reproduce the issue.

[joshhanley]

@jeffchown ah thanks! You are correct it seems when in a modal that has a variant prop defined, then they don't show up. Will reopen.

Volt component that demonstrates the issue.

<?php

use Livewire\Volt\Component;

new class extends Component {
    //
}; ?>

<div>
    <flux:modal.trigger name="edit-profile">
        <flux:button>Edit profile</flux:button>
    </flux:modal.trigger>

    <flux:modal variant="flyout" name="edit-profile" class="md:w-96">
        <flux:select placeholder="Choose industry...">
            <flux:select.option>Photography</flux:select.option>
            <flux:select.option>Design services</flux:select.option>
            <flux:select.option>Web development</flux:select.option>
            <flux:select.option>Accounting</flux:select.option>
            <flux:select.option>Legal services</flux:select.option>
            <flux:select.option>Consulting</flux:select.option>
            <flux:select.option>Other</flux:select.option>
        </flux:select>
    </flux:modal>
</div>

[jeffchown]

Great! Thanks, @joshhanley!

[joshhanley]

Worked it out, the option component was trying to use the variant from the modal, as @aware doesn't have a sense of scope. I've submitted a PR with a fix.

[jeffchown]

Perfect. Figured it was related to that previous issue. Thanks, @joshhanley !

[joshhanley]

@jeffchown yep, I'd fixed checkbox and radio, but missed select options haha