Suggestions Mode for Combobox - Allow User Entered Values

[pitbully]

I would like to be able to use Combobox variant of select to be a "suggestion" only mode where values not in the option list are allowed to be submitted.

https://www.w3.org/WAI/ARIA/apg/patterns/combobox/

Based on the w3 spec, one of two common use cases is as such

An arbitrary value is allowed, but it is advantageous to suggest possible values to users. For example, a search field may suggest similar or previous searches to save the user time.

In order to implement something similar right now, I did the following:

<flux:field>
    <flux:label badge="Optional">Category</flux:label>
    <flux:input.group>
        <flux:select variant="combobox" :filter="false" wire:model.live="category" x-show="!createCategory" placeholder="Existing category">
            @foreach ($categories as $category)
                <flux:option :key="$category" value="{{ $category }}">{{ $category }}</flux:option>
            @endforeach
        </flux:select>
         <flux:button icon="plus" x-on:click="createCategory = true" x-show="!createCategory">New</flux:button>
    </flux:input.group>

    <flux:input.group>
        <flux:input wire:model="newCategory" x-show="createCategory" placeholder="New category" />
        <flux:button icon="x-mark" x-on:click="createCategory = false" x-show="createCategory"></flux:button>
    </flux:input.group>
    <flux:error name="category" />
</flux:field>

[joshhanley]

@pitbully this should already by possible by passing a flux:input to the input slot on the select, which will allow you to wire:model to it to get the new value. See here https://fluxui.dev/components/select#the-input-slot

[pitbully]

Yes, that should work actually. I missed this. Thanks!

[pitbully]

@joshhanley It actually doesn't appear to be possible right now. I think because the variant "combobox" adds autocomplete="strict"

If I modify the flux combobox variant for select so that autocomplete="strict" becomes autocomplete="flexible" then I am able to get the desired effect.

<flux:field>
          <flux:label badge="Optional">Category</flux:label>
          <flux:select variant="combobox" :filter="true" placeholder="Category">
              <x-slot name="input">
                  <flux:select.input wire:model="category" x-model="search" />
              </x-slot>

              @foreach ($categories as $category)
                  <flux:option wire:key="$category" value="{{ $category }}">{{ $category }}</flux:option>
              @endforeach
          </flux:select>
      </flux:field>

• "category" will get updated when selecting an option from the predefined option list
• "category" will get updated when a value is entered into the field.
• selecting an option after typing in a value will override the typed value

Seems to work as expected

[pitbully]

My modification to flux/select/variants/combobox.blade.php which allows specifying the autocomplete attribute but defaulting to strict as it is currently in source.

@props([
   ...
    'autocomplete' => 'strict',
])

...

<ui-select autocomplete="{{ $autocomplete }}" ...>
    ...
</ui-select>