Select Component Options don't change if is multiple

[ismaail]

Package

filament/forms

Package Version

3.2.92

Laravel Version

11.14.0

Livewire Version

No response

PHP Version

PHP 8.3.9

Problem description

In a Product Form, Variants are added with a Repeatable Component, and this Variants are used in a Select Components in another Section in the same Form.

✅ If the Select Component is single, the changes in the Variants Repeatable are reflected in the Variants Selects after the form is saved see video 1.

❌ But if the Select Component is multiple, I have to reload the page to see changes in the Select Component see video 2.

sidenote: if I remove the relationship in the Select Component, it works as expected.

Expected behavior

Select Options to change if a Variant is added or removed in the Form.

Steps to reproduce

1. clone the repo
2. create new Product,
3. Add/Delete Variants and see if Select Component Options change without reloading the page

Reproduction repository (issue will be closed if this is not valid)

https://github.com/ismaail/filament_issue_2

Relevant log output

No response

Donate 💰 to fund this issue

• You can donate funding to this issue. We receive the money once the issue is completed & confirmed by you.
• 100% of the funding will be distributed between the Filament core team to run all aspects of the project.
• Thank you in advance for helping us make maintenance sustainable!

[zepfietje]

This is caused by the Choices.js select which is used with multiple(). Unfortunately, I don't believe there's anything we can do here.

[ismaail]

but if you comment out the relationship in stocks_repeater Repeater Component, it works just fine see video 3.

->schema([
    Forms\Components\Repeater::make('stocks_repeater')
        ->relationship('stocks')
        ->hiddenLabel()
        ->itemLabel(fn(array $state): ?string => $state['title'] ?? null)
        ->collapsible()
        ->grid(2)
        ->schema([
            Forms\Components\TextInput::make('quantity')->required(),
            Forms\Components\Select::make('variants')
                /*->relationship(
                    name: 'variants',
                    titleAttribute: 'title',
                    modifyQueryUsing: function (Builder $builder, Stock $record) {
                        $builder->where('product_id', '=', $record->product_id);
                    },
                )*/
                ->options(function (Stock $record) {
                    return Variant
                        ::where('product_id', '=', $record->product_id)
                        ->pluck('title', 'id');
                })
                ->multiple()
            ,
        ])
]),

[leandrocfe]

Could you try to add this?

Forms\Components\Select::make('variants')
...
->extraInputAttributes(['wire:key' => Str::random(10)])

[ismaail]

@leandrocfe I tried ->extraInputAttributes and it didn't work,

then I checked for other similar methods, I tried ->extraAlpineAttributes(['wire:key' => Str::random(10)]) and it works.

[leandrocfe]

Did you inspect the browser to see if it appears using extraInputAttributes? This was supposed to work

[leandrocfe]

https://github.com/filamentphp/filament/discussions/12074#discussioncomment-9168846

[ismaail]

yes, with extraInputAttributes the <select> has the attribute wire:key

[JakeOcean]

Somewhat related, when using the createOptionForm to add a new Option to a Select within a Modal (during Import in my case), the newly created Option never gets selected unless ->searchable() or ->extraInputAttributes(['wire:key' => Str::random(10)]) is added to the Select

[adnan-smlatic]

@ismaail Thank you for this

->extraAlpineAttributes(['wire:key' => Str::random(10)]

I couldn't get disableOptionWhen in the Select form to update when the options changed, this is an ugly but temporary ok workaround.