Custom Select component has issues with "multiple" property in livewire

Laravel Form Components Version

v7.1

Laravel Version

v9.5.1

Alpine Version

v3.0.6

Bug description

When I use the custom-select component with "multiple" property, the component has a bad behavior when multiple options are selected quickly.

In the php:

public $tagList;
public $tags;

public function mount()
{
    $this->tags = [];
    $this->tagList = [
        [
            'id' => 1,
            'name' => 'ABC',
        ],
        [
            'id' => 2,
            'name' => 'QWE',
        ],
        [
            'id' => 3,
            'name' => 'ZXC',
        ],
        [
            'id' => 4,
            'name' => 'FGH',
        ],
        [
            'id' => 5,
            'name' => 'RTY5A',
        ],
        [
            'id' => 6,
            'name' => '6ABC',
        ],
        [
            'id' => 7,
            'name' => 'dfgABC',
        ],
        [
            'id' => 8,
            'name' => 'vbnv',
        ],
        [
            'id' => 9,
            'name' => 'FGHJF',
        ],
        [
            'id' => 10,
            'name' => 'BNMNBMNBM',
        ],
    ];

    // ...
}

In the blade file:

<x-form-group label="{{ __('Tags') }}" name="tags" class="col-span-6 sm:col-span-4">
    <x-custom-select
        name="tags"
        value-field="id"
        label-field="name"
        :options="$tagList"
        wire:model="tags"
        placeholder="{{ __('Please select your tags') }}"
        multiple 
        optional 
    />
</x-form-group>

As result, the input toggles the first selected option indefinitely.

bug with custom component multiple

Plus, sometimes the option selected shows the ID instead of the NAME.

I tried to solve using "closeOnSelect" and "wire:model.lazy", but the custom-input behaviour is still weird:

when I select several options and I clicked on each item to delete them, then the id is displayed instead of the name.

I would appreciate any help.

Thanks!

Steps to reproduce

Use a custom-select component and set a wire:model
Add "multiple" property
Select several options in the component
In the input: Click on each selected option to remove it.
The selected options on the left will display the id instead of the name.

Relevant log output

No response

rawilk / laravel-form-components