Unable to focus on select if variant="listbox"

[ptravassos]

<?php

use Livewire\Volt\Component;
use App\Models\User;
use Livewire\Attributes\Computed;

new class extends Component {
    #[Computed]
    public function users()
    {
        return User::all();
    }
}; ?>

<div>
    <flux:main>

        <flux:button x-on:click="$refs.refCombobox.focus();" class="mt-5">{{ __('Focus on combobox') }}</flux:button>

        <flux:select variant="combobox">
            <x-slot name="input">
                <flux:select.input x-ref="refCombobox"/>
            </x-slot>
            @foreach ($this->users as $user)
                <flux:option wire:key="combobox-{{ $user->id }}" value="{{ $user->id }}">
                    {{ $user->name }}
                </flux:option>
            @endforeach
        </flux:select>

        <flux:button x-on:click="$refs.reflistbox.focus();" class="mt-5">{{ __('Focus on listbox') }}</flux:button>

        <flux:select variant="listbox" searchable clearable>
            <x-slot name="search">
                <flux:select.search x-ref="reflistbox" placeholder="Search industries..." />
            </x-slot>
            @foreach ($this->users as $user)
                <flux:option wire:key="listbox-{{ $user->id }}" value="{{ $user->id }}">
                    {{ $user->name }}
                </flux:option>
            @endforeach
        </flux:select>

    </flux:main>
</div>

Unable to focus() on a select as listbox. My personal case is to autofocus a select field as listbox with filter=false, when a button is clicked. As combobox works perfectly, but not as listbox. Since i need the filter=false, i have no other way, as far as i know.

Thank you.

Flux 1.0.20

[calebporzio]

I'm not 100% clear on your situation, but here is a snippet you can use to open the listbox and focus the search field when the button is pressed:

<flux:button x-on:click="$refs.reflistbox.click()" class="mt-5">{{ __('Focus on listbox') }}</flux:button>

<flux:select variant="listbox" searchable clearable>
    <x-slot name="button">
        <flux:select.button x-ref="reflistbox" placeholder="Choose industry..." />
    </x-slot>

    <x-slot name="search">
        <flux:select.search placeholder="Search industries..." />
    </x-slot>

    @foreach ($this->users as $user)
        <flux:option wire:key="listbox-{{ $user->id }}" value="{{ $user->id }}">
            {{ $user->name }}
        </flux:option>
    @endforeach
</flux:select>

You can change .click() to .focus() if you only want to focus the button, but I don't see why you would want to do that.

Hope that helps.

[ptravassos]

It was exactly that. Didn't knew about the button/click action on the listbox. Thanks a lot for all your excellent work.