Add Support for Creating Non-Existent Options in Combobox

[DanielSpravtsev]

Hi there!

I’m building a combobox with the ability to create a new option when no existing options match the search results. However, I’m facing an issue where I can only disable the existing <flux:select.empty> by publishing the Blade component and manually removing it.

<flux:select label="Select" variant="combobox" wire:model.live.debounce="project_id">
                    <x-slot name="input">
                        <flux:select.input wire:model="project_search"/>
                    </x-slot>
                    <flux:select.empty>
                        <flux:button class="w-full" variant="ghost" wire:click="create">Create Project</flux:button>
                    </flux:select.empty>
                    @foreach($this->projects as $id => $project)
                        <flux:option value="{{ $id }}">{{ $project }}</flux:option>
                    @endforeach
                </flux:select>

It would be great to see built-in support for creating non-existent options directly within Flux, as I think this is a pretty common use case.

[nerisonpitogo]

I'm looking for this right now.

[jeffchown]

@DanielSpravtsev What you are describing is similar to a tag-type control (e.g. https://yaireo.github.io/tagify/).
Not the displaying in pills aspect, but the ability to add non-existent options.

While it doesn't exist yet in Flux, I'm also looking to create something along the same lines.

If you could share a full copy/pasteable code sample (Volt components are great for this), maybe we can combine our efforts to come up with something 'unofficial' until this functionality exists in native Flux.

[connor-devuk]

I agree I also think It would be super cool to have a livewire callback function for this so like calback-function="createTag"

then the create Tag function gets called passing the $text, this would be really cool for making it popup into a modal or something but I don't really need that I only need the base functionality but just throwing some more cool ideas

[rodrigomantoan]

I would love to see this feature as well

[thestepafter]

This would be a great feature in flux!

[dbarou55e]

A combo box should allow the user to select from the list OR input their own value. I don't see what the difference is with the current "combobox" variant on a select vs a select without the variant?

[peterjthomson]

The "find or create" pattern is pretty fundamental to combobox functionality in a business context. Select2 handles it nicely by allowing a 'new' option to be added to the select options with a little plus at the start which makes it clear to the user that they'll be 'creating' an option.

[ganyicz]

The "create option" is now available in Flux 2.10.

It handles unique and min length validation, works with backend search, custom validation rules, supports modals and more. You can use it with searchable select, combobox and pillbox, including a new pillbox variant with inline input.

Simply add the new create option component at the beginning or end of your options and define a Livewire method that should run when the option is selected. Flux will take care of everything else. Enjoy! 🚀

https://fluxui.dev/components/select#create-option
https://fluxui.dev/components/pillbox#create-option

[DanielSpravtsev]

What a hero! 🥇