Filament•12mo ago

When using the Select component with multiple() options, a large number of requests are being sent.

I have implemented the component to allow selecting a department and then multiple related categories. The component has been implemented as follows:

Components\Select::make('department')->label('department')
    ->options(\App\Models\Department::pluck('name', 'id')->toArray())
    ->required()
    ->preload()
    ->reactive()
    ->afterStateUpdated(function (callable $set) {
        $set('categories', []);
    }),
Components\Select::make('categories')->label('category')
    ->multiple()
    ->required()
    ->searchable(false)
    ->options(function(callable $get) {
        $department = \App\Models\Department::find($get('department'));
        if (empty($department)) {
            return [];
        }
        return ['0' => 'all'] + $department->categories->pluck('name', 'id')->toArray();
    }),

Components\Select::make('department')->label('department')
    ->options(\App\Models\Department::pluck('name', 'id')->toArray())
    ->required()
    ->preload()
    ->reactive()
    ->afterStateUpdated(function (callable $set) {
        $set('categories', []);
    }),
Components\Select::make('categories')->label('category')
    ->multiple()
    ->required()
    ->searchable(false)
    ->options(function(callable $get) {
        $department = \App\Models\Department::find($get('department'));
        if (empty($department)) {
            return [];
        }
        return ['0' => 'all'] + $department->categories->pluck('name', 'id')->toArray();
    }),

With this implementation, a large number of requests are being sent. If you remove multiple() or avoid using a callback with options(), you won't experience the issue of generating a large number of requests.

PHP: 8.0
Laravel: 9.52.9
Filament: 2.17.48

PHP: 8.0
Laravel: 9.52.9
Filament: 2.17.48

※ translated by chatGPT 🙏

Solution:

```php Components\FileUpload::make('image')->label('Image')->image()->required() ->disk(config('filesystems.default')) ->directory(config('filesystems.disks.'.config('filesystems.default').'.root')) ->afterStateHydrated(static function (\Filament\Forms\Components\BaseFileUpload $component, string | array | null $state): void {...

Jump to solution

4 Replies

tanakei•12mo ago

Components\Select::make('categories')->label('category')
    ->multiple()
    ->options(function(callable $get) {
        return ['0' => 'all'];
    }),

Components\Select::make('categories')->label('category')
    ->multiple()
    ->options(function(callable $get) {
        return ['0' => 'all'];
    }),

Even with the above implementation, multiple requests are still occurring 😢

toeknee•12mo ago

So do you have widgets on that page?

tanakei•12mo ago

No, widgets are not used on this page. I found a few causes. The following components seem to be affected

                    Components\FileUpload::make('image')->label('Image')->image()->required()
                        ->disk(config('filesystems.default'))
                        ->directory(config('filesystems.'.config('filesystems.default').'.root'))
                        ->afterStateHydrated(function($component, $record) {
                            if ($record) {
                                $filename = \Arr::last(explode('/', $record->image));
                                $component->state([$filename => $filename]);
                            }
                        })

                    Components\FileUpload::make('image')->label('Image')->image()->required()
                        ->disk(config('filesystems.default'))
                        ->directory(config('filesystems.'.config('filesystems.default').'.root'))
                        ->afterStateHydrated(function($component, $record) {
                            if ($record) {
                                $filename = \Arr::last(explode('/', $record->image));
                                $component->state([$filename => $filename]);
                            }
                        })

When I remove afterStateHydrated(), the requests stop.

Solution

tanakei•12mo ago

                    Components\FileUpload::make('image')->label('Image')->image()->required()
                        ->disk(config('filesystems.default'))
                        ->directory(config('filesystems.disks.'.config('filesystems.default').'.root'))
                        ->afterStateHydrated(static function (\Filament\Forms\Components\BaseFileUpload $component, string | array | null $state): void {
                            if (blank($state)) {
                                $component->state([]);

                                return;
                            }

                            $state = \Arr::last(explode('/', $state));

                            $files = collect(\Arr::wrap($state))
                                ->filter(static function (string $file) use ($component): bool {
                                    try {
                                        return blank($file) || $component->getDisk()->exists($file);
                                    } catch (\League\Flysystem\UnableToCheckFileExistence $exception) {
                                        return false;
                                    }
                                })
                                ->mapWithKeys(static fn (string $file): array => [((string) \Str::uuid()) => $file])
                                ->all();

                                $component->state($files);
                        })

                    Components\FileUpload::make('image')->label('Image')->image()->required()
                        ->disk(config('filesystems.default'))
                        ->directory(config('filesystems.disks.'.config('filesystems.default').'.root'))
                        ->afterStateHydrated(static function (\Filament\Forms\Components\BaseFileUpload $component, string | array | null $state): void {
                            if (blank($state)) {
                                $component->state([]);

                                return;
                            }

                            $state = \Arr::last(explode('/', $state));

                            $files = collect(\Arr::wrap($state))
                                ->filter(static function (string $file) use ($component): bool {
                                    try {
                                        return blank($file) || $component->getDisk()->exists($file);
                                    } catch (\League\Flysystem\UnableToCheckFileExistence $exception) {
                                        return false;
                                    }
                                })
                                ->mapWithKeys(static fn (string $file): array => [((string) \Str::uuid()) => $file])
                                ->all();

                                $component->state($files);
                        })

Self resolved. It seems that afterStateHydrated() was not implemented well. I fixed it with reference to the original implementation. thanks.

Gaming

Programming

When using the Select component with multiple() options, a large number of requests are being sent.