select listbox variant not searching options when typing

[jeffchown]

I'm not sure if something's changed recently, but my flux:selects with variant="listbox" no longer highlight an option when I start typing the matching first character(s) of an option.

I'm running Flux 1.0.23 after running php artisan view:clear with NO published Flux components.

e.g.: (using code samples from docs)

• first (native) select acts as expected and highlights Legal services if I type L
• 2nd variant="listbox" doesn't highlight anything when focused and I start typing
• 3rd variant="combobox" acts as expected (using .includes() so I can search in middle of options as well)

<div class="space-y-2">
    <flux:select placeholder="Choose industry..." label="No variant">
        <flux:option>Photography</flux:option>
        <flux:option>Design services</flux:option>
        <flux:option>Web development</flux:option>
        <flux:option>Accounting</flux:option>
        <flux:option>Legal services</flux:option>
        <flux:option>Consulting</flux:option>
        <flux:option>Other</flux:option>
    </flux:select>

    <flux:select variant="listbox" placeholder="Choose industry..." label="listbox variant">
        <flux:option>Photography</flux:option>
        <flux:option>Design services</flux:option>
        <flux:option>Web development</flux:option>
        <flux:option>Accounting</flux:option>
        <flux:option>Legal services</flux:option>
        <flux:option>Consulting</flux:option>
        <flux:option>Other</flux:option>
    </flux:select>

    <flux:select variant="combobox" placeholder="Choose industry" label="combobox variant">
        <flux:option>Photography</flux:option>
        <flux:option>Design services</flux:option>
        <flux:option>Web development</flux:option>
        <flux:option>Accounting</flux:option>
        <flux:option>Legal services</flux:option>
        <flux:option>Consulting</flux:option>
        <flux:option>Other</flux:option>
    </flux:select>
</div>

[jeffchown]

UPDATE: @calebporzio @joshhanley I assume this has something to do with the issue - via devtools, I see that all flux:options for both the listbox and combobox have a leading and trailing space (not sure why) which would affect the .startsWith() search in listbox

[calebporzio]

Hmmm that's odd - I don't see an implementation for this in the source code at all. Only for the menu component.

Anyhow, I added it in and made the search "running" with a 300ms debounce for both this and the menu component as well while we were at it so that it mirrors native select behavior as best as possible.

Good catch, will be in the next release.

[jeffchown]

Thanks, @calebporzio !