Filament•2mo ago

Dynamic load component - Reactive does not work on Select

    public ?string $key = null;

    public function form(Schema $schema): Schema
    {
        return $schema
            ->schema([
                ...$this->getBaseComponents(),
                Action::make('make_new_item')
                    ->label('Make new Item')
                    ->action(function (): void {
                        $state = $this->form->getRawState(); // or ->getState()
                        $this->key = $state['component'] ?? null;
                    }),
                Group::make()->components(fn() => $this->getExtraComponents($this->key)),
            ]);
    }

    protected function getBaseComponents(): array
    {
        return [
            Components\TextInput::make('name')
                ->label('Name')
                ->required(),

            Components\Select::make('component')
                ->searchable()
                ->live()
                ->options([
                    'email' => 'Email',
                    'last_name' => 'Last name',
                ])
                ->label('Component')
                ->required(),
        ];
    }

    protected function getExtraComponents(?string $key = null): array
    {
        $mapping = [
            'email' => [
                Components\Textarea::make('email')
                    ->label('Email'),
            ],
            'last_name' => [
                Components\Textarea::make('last_name')
                    ->label('Last name'),

                Components\Select::make('country')
                    ->afterstateUpdated(function ($state, $set) {
                        dd($state);
                    })
                    ->live()
                    ->searchable()
                    ->options([
                        'test' => 'Test',
                        'test2' => 'Test2',
                    ])
                    ->label('Country'),
            ],
        ];

        return $key ? ($mapping[$key] ?? []) : [];
    }
}

    public ?string $key = null;

    public function form(Schema $schema): Schema
    {
        return $schema
            ->schema([
                ...$this->getBaseComponents(),
                Action::make('make_new_item')
                    ->label('Make new Item')
                    ->action(function (): void {
                        $state = $this->form->getRawState(); // or ->getState()
                        $this->key = $state['component'] ?? null;
                    }),
                Group::make()->components(fn() => $this->getExtraComponents($this->key)),
            ]);
    }

    protected function getBaseComponents(): array
    {
        return [
            Components\TextInput::make('name')
                ->label('Name')
                ->required(),

            Components\Select::make('component')
                ->searchable()
                ->live()
                ->options([
                    'email' => 'Email',
                    'last_name' => 'Last name',
                ])
                ->label('Component')
                ->required(),
        ];
    }

    protected function getExtraComponents(?string $key = null): array
    {
        $mapping = [
            'email' => [
                Components\Textarea::make('email')
                    ->label('Email'),
            ],
            'last_name' => [
                Components\Textarea::make('last_name')
                    ->label('Last name'),

                Components\Select::make('country')
                    ->afterstateUpdated(function ($state, $set) {
                        dd($state);
                    })
                    ->live()
                    ->searchable()
                    ->options([
                        'test' => 'Test',
                        'test2' => 'Test2',
                    ])
                    ->label('Country'),
            ],
        ];

        return $key ? ($mapping[$key] ?? []) : [];
    }
}

Solution:

try this code please ```php public ?string $key = null;...

Jump to solution

9 Replies

navidsafaviOP•2mo ago

in component select, after select "last_name" there is a button for call and make components, i want to handle country with live(), but does not work. (I dont see any request to livewire and afterstateUpdated() method could not call) nobody knows?:squint:

LeandroFerreira•2mo ago

Resource? Custom page, custom livewire component?

navidsafaviOP•2mo ago

Hello @Leandro Ferreira this is a create record resource

navidsafaviOP•2mo ago

Dan Harrin•2mo ago

please open an issue with a reproduction repository

navidsafaviOP•2mo ago

Sure, Thanks

Solution

LeandroFerreira•2mo ago

try this code please

public ?string $key = null;

public function form(Schema $schema): Schema
{
    return $schema
        ->schema([
            TextInput::make('name'),
            Select::make('component')
                ->searchable()
                ->options([
                    'email' => 'Email',
                    'last_name' => 'Last name',
                ]),
            Action::make('makeNewItem')
                ->action(function (Action $action) {

                    $this->key = $action
                        ->getSchemaContainer('component')
                        ->getComponent('component')
                        ->getState();

                    $action
                        ->getSchemaContainer()
                        ->getComponent('dynamicFields')
                        ->getChildSchema()
                        ->fill();
                }),
            Group::make(fn (): array => match ($this->key) {
                default => [],
                'email' => [
                    Textarea::make('email'),
                ],
                'last_name' => [
                    Textarea::make('last_name'),
                    Select::make('country')
                        ->live()
                        ->afterStateUpdated(function (?string $state) {
                            // Handle the state update logic here
                        })
                        ->searchable()
                        ->options([
                            'option1' => 'Option 1',
                            'option2' => 'Option 2',
                        ]),
                ],
            })
                ->key('dynamicFields'),
        ]);
}

public ?string $key = null;

public function form(Schema $schema): Schema
{
    return $schema
        ->schema([
            TextInput::make('name'),
            Select::make('component')
                ->searchable()
                ->options([
                    'email' => 'Email',
                    'last_name' => 'Last name',
                ]),
            Action::make('makeNewItem')
                ->action(function (Action $action) {

                    $this->key = $action
                        ->getSchemaContainer('component')
                        ->getComponent('component')
                        ->getState();

                    $action
                        ->getSchemaContainer()
                        ->getComponent('dynamicFields')
                        ->getChildSchema()
                        ->fill();
                }),
            Group::make(fn (): array => match ($this->key) {
                default => [],
                'email' => [
                    Textarea::make('email'),
                ],
                'last_name' => [
                    Textarea::make('last_name'),
                    Select::make('country')
                        ->live()
                        ->afterStateUpdated(function (?string $state) {
                            // Handle the state update logic here
                        })
                        ->searchable()
                        ->options([
                            'option1' => 'Option 1',
                            'option2' => 'Option 2',
                        ]),
                ],
            })
                ->key('dynamicFields'),
        ]);
}

LeandroFerreira•2mo ago

reference

Overview - Forms - Filament

navidsafaviOP•2mo ago

WOW @Leandro Ferreira works well this is very secret code on Filament😅 🙏 Appreciate you!

Gaming

Programming

Dynamic load component - Reactive does not work on Select

Did you find this page helpful?