flux:select variant="listbox" requires a space+<first character> when searching options

[jeffchown]

(reopening #663)

@calebporzio in v1.0.24 and v1.0.25 I still have to add a leading space to my search (due to the leading and trailing space in the flux:select variant="listbox"'s options) to get a listbox to find a matching option.

e.g. when the listbox is focused, to search Web to highlight Web Development I have to type space+w (vs. just w with a native select)

[jeffchown]

UPDATE: Further to my original post, I am referring to typing when the flux:select is focused but the dropdown is not open

@calebporzio Are alpha keydowns not processed unless the dropdown is open?

If you try this code and type the first letter e.g. w in the first (native) select, Web development will be selected (without needing to open the dropdown). = 1 keystroke

If you then tab to the variant="listbox" to make it focused (and highlighted), then type w, nothing happens. If, however, you type down arrow to open the dropdown, then w to highlight Web development, then Enter to select Web development it will be selected. = 3 keystrokes

I have some complicated forms with a lot of listboxes and for users who use the form a lot (they use it multiple times per day) and are comfortable navigating the form with tab, shift+tab, being able to select a value in a flux:listbox with the first letter or two (which is possible using native selects) greatly speeds up their form submissions.

I'd like to be able to use the variant="listbox" for the ability to style the options, but the extra keystrokes make it prohibitive for my larger forms.

<div class="space-y-3">
    <flux:select placeholder="Choose industry..." autofocus label="native select">
        <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>
</div>

[tjgore]

Are alpha keydowns not processed unless the dropdown is open?

Yes, that's the case. The listbox seems to wait for either an ArrowDown or Space keydown event to open the list of options. The odd thing here is I do see logic for the ArrowDown key event but nothing for Space event.
I can also use chrome devtools debugger to pause execution on ArrowDown event but not on the Space. I'm wondering if the Space key event is a browser behavior.

I checked out other component libraries and they seem to handle listboxes in a similar way. Wait to be open before you can search the options.
I do like the idea of making the listbox work like the select. It provides a better user experience.

Looking into a possible solution that requires an update to the internals of flux select.js. Still testing it out. Will keep you posted.