filamentphp / filament

A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS.

Home Page:https://filamentphp.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Select Component Options don't change if is multiple

ismaail opened this issue · comments

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!
Fund with Polar

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.

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()
            ,
        ])
]),

Could you try to add this?

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

@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.

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

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

image

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