Select with extra functional buttons

[yangsystem]

I want to add next to the select field an add button. the button should have programable functionality ( in my case I want an add new option modal for an model)

Also I want if it is possible if I have a form opened in a modal that has the select with the extra button/buttons to be able to open the second modal on top save the record and close only the second modal and refresh the records without closing the first modal

[joshhanley]

@yangsystem try using an input group as documented here https://fluxui.dev/components/input#with-buttons

[yangsystem]

10Q. I managed to make it work here is the code I used.

<flux:field>
    <flux:label>Client *</flux:label>
    <flux:input.group>
        <flux:select wire:model="client_id" variant="listbox" searchable placeholder="Alege...">
            @foreach ($clienti as $client)
                <flux:option wire:key="{{ $client->id }}" value="{{ $client->id }}">
                    {{ $client->nume_client }}
                </flux:option>
            @endforeach
        </flux:select>

        <flux:modal.trigger name="adauga-client">
            <flux:tooltip content="Adauga client">
                <flux:button icon="list-plus" />
            </flux:tooltip>
        </flux:modal.trigger>

        <flux:modal name="adauga-client" class="w-3/4 space-y-6" @close="reload_clienti">
            <livewire:form-comp.add-client />
        </flux:modal>
    </flux:input.group>
</flux:field>

Now I have this problem: If I submit the form from the component <livewire:form-comp.add-client /> it try's to submit also my main form.

[yangsystem]

Problem solved for the form submission:
I have removed the wire:submit from the form element,
changed the button from
<flux:button type="submit" wire:click="adauga_user">Adauga</flux:button>
to
<flux:button type="button" wire:click="adauga_user">Adauga</flux:button>
and all is working according to plan.