Select Option Groups

[mikebronner]

I couldn't find documentation or code that supported select option groups. Did I miss something? I am using the following work-around:

                    <flux:select
                        class="!font-sans !w-auto !border-transparent"
                        data-tippy-content="Select A Book"
                        data-tippy-placement="top"
                        wire:model="selectedBook"
                    >

                        @foreach ($bookOptions as $label => $options)
                            <optgroup
                                label="{{ $label }}"
                            >
                                
                                @foreach ($options as $option)
                                    <flux:option
                                        wire:key="{{ $option }}"
                                        value="{{ $option }}"
                                    >
                                        {{ $option }}
                                    </flux:option>
                                @endforeach

                            </optgroup>
                        @endforeach

                    </flux:select>

If this is the expected implementation, is this something that would be useful to document? Or is this a feature that could be added?

[iliyto]

I think you can use any HTML tags inside <flux:select>.

Example:

<flux:select
    class="!font-sans !w-auto !border-transparent"
    data-tippy-content="Select A Book"
    data-tippy-placement="top"
    wire:model="selectedBook"
>
    @foreach ($bookOptions as $label => $options)
        <div class=“font-semibold uppercase border-b pb-1” >{{ $label }}</div>
            @foreach ($options as $option)
                <flux:option
                    wire:key="{{ $option }}"
                    value="{{ $option }}"
                >
                    {{ $option }}
                </flux:option>
            @endforeach
        </optgroup>
    @endforeach
</flux:select>

[seabasss]

I couldn't find documentation or code that supported select option groups. Did I miss something? I am using the following work-around:

                    <flux:select
                        class="!font-sans !w-auto !border-transparent"
                        data-tippy-content="Select A Book"
                        data-tippy-placement="top"
                        wire:model="selectedBook"
                    >

                        @foreach ($bookOptions as $label => $options)
                            <optgroup
                                label="{{ $label }}"
                            >
                                
                                @foreach ($options as $option)
                                    <flux:option
                                        wire:key="{{ $option }}"
                                        value="{{ $option }}"
                                    >
                                        {{ $option }}
                                    </flux:option>
                                @endforeach

                            </optgroup>
                        @endforeach

                    </flux:select>

If this is the expected implementation, is this something that would be useful to document? Or is this a feature that could be added?

That doesn't work on searchable selects right?

I tried @iliyto's suggestion with div (minus the hanging optgroup) and it shows up, but also stays when you search.

How have other people solved this for searchable selects?

[ultimateBusiness]

You can make use of "flux:seperator" inside "flux:select" as a work around to emulate the optgroup behavior.

[seabasss]

Do you have an example? Would they not show up if a search doesn’t match?

[ultimateBusiness]

flux:select
<flux:separator text="..." />
flux:select.option ...

<flux:separator text="..." />
flux:select.option ...
</flux:select>

And yes - the separator show's up - but at the moment better than nothing.

A real implementation of optgroup would be better ;-)

[mauritskorse]

You could use some css for this:

<optgroup class="hidden has-[option]:block"> 
   //...
</optgroup>

ie:

@php
        $bookOptions = [
            'Fiction' => ['The Great Gatsby', 'To Kill a Mockingbird'],
            'Non-Fiction' => ['Sapiens', 'Educated'],
            'Science Fiction' => [], 
            'Fantasy' => ['The Hobbit', 'Harry Potter'],
            'Mystery' => [],
            'Romance' => [],
        ];

        $selectedBook = null;
    @endphp

    <flux:select
        class="!font-sans !w-auto !border-transparent"
        wire:model="selectedBook"
    >

        @foreach ($bookOptions as $label => $options)
            <optgroup
                class="hidden has-[option]:block"
                label="{{ $label }}"
            >
                @foreach ($options as $option)
                    <flux:select.option
                        wire:key="{{ $option }}"
                        value="{{ $option }}"
                    >
                        {{ $option }}
                    </flux:select.option>
                @endforeach

            </optgroup>
        @endforeach

    </flux:select>

[seabasss]

Does not work for variant="listbox" searchable

[joffreypersia]

It's hard to believe some basic stuff like optgroup on listbox are not supported by Flux, but the team does a lot of effort on sidebar.

A form component should be the priority #1 for mass adoption...

[helderneves91]

+1

[cladico]

+1

[cladico]

I keep coming back to this.
Can we have this feature?