Filament•11mo ago

[WIZARD] Next and submit button do not change after Wizard\Step becomes visible.

Hi! I am using a Wizard in a

CreateResource

CreateResource

. It has one "general" step, but the other steps are shown based on the selected product.

This is where my problem occurs: When selecting a product, the step appears in the header of the widget, but unfortunately, the "next" button does not show up.

I've added a video demonstrating this issue. As you can see, the submit button ("Aanmaken") remains visible, whereas it should be replaced by the next button ("Volgende").

Am I missing something? Is this not possible at all, or could this be a bug? I'd love to hear your thoughts!
Thanks in advance!

Solution

@ChesterS Lots of tears later, but I found the issue! It appears something is going wrong with the ‘x-show’ property. After changing it to ‘x-bind:class’ everything works fine. I’ve opened a PR to resolve this: https://github.com/filamentphp/filament/pull/15493 Thanks for your help!

GitHub

Hide Wizard Action buttons using x-bind:class instead of x-show so ...

… works with hidden Steps
There was a bug with the action buttons in a wizard. When the last step of a wizard was hidden and then becomes visible, the submit button stays visible while it should be...

Jump to solution

return [
            Wizard::make([
                Wizard\Step::make('Algemeen')
                    ->schema([
                        Select::make('customer_id')
                            ->label('Klant')
                            ->relationship('customer', 'name')
                            ->default(request('customer_id'))
                            ->disabled(request()->has('customer_id'))
                            ->searchable()
                            ->reactive()
                            ->required()
                            ->options(Customer::pluck('name', 'id')->toArray()),
                        Select::make('product_id')
                            ->label('Product')
                            ->searchable()
                            ->reactive()
                            ->required()
                            ->options(Product::pluck('name', 'id')->toArray()),
                        DatePicker::make('start_date')
                            ->label('Startdatum')
                            ->default(now())
                            ->required(),
                        TextInput::make('reference')
                            ->label('Referentie')
                            ->placeholder('AB123456')
                            ->required()
                            ->hidden(fn ($get) => optional(Product::find($get('product_id')))->type === ProductTypeEnum::DOMAIN),
                    ])->columns(2),
                Wizard\Step::make('Domein')
                    ->schema([

                    ])
                    ->visible(fn ($get) => optional(Product::find($get('product_id')))->type === ProductTypeEnum::DOMAIN),
            ])
                ->columnSpanFull()
        ]

return [
            Wizard::make([
                Wizard\Step::make('Algemeen')
                    ->schema([
                        Select::make('customer_id')
                            ->label('Klant')
                            ->relationship('customer', 'name')
                            ->default(request('customer_id'))
                            ->disabled(request()->has('customer_id'))
                            ->searchable()
                            ->reactive()
                            ->required()
                            ->options(Customer::pluck('name', 'id')->toArray()),
                        Select::make('product_id')
                            ->label('Product')
                            ->searchable()
                            ->reactive()
                            ->required()
                            ->options(Product::pluck('name', 'id')->toArray()),
                        DatePicker::make('start_date')
                            ->label('Startdatum')
                            ->default(now())
                            ->required(),
                        TextInput::make('reference')
                            ->label('Referentie')
                            ->placeholder('AB123456')
                            ->required()
                            ->hidden(fn ($get) => optional(Product::find($get('product_id')))->type === ProductTypeEnum::DOMAIN),
                    ])->columns(2),
                Wizard\Step::make('Domein')
                    ->schema([

                    ])
                    ->visible(fn ($get) => optional(Product::find($get('product_id')))->type === ProductTypeEnum::DOMAIN),
            ])
                ->columnSpanFull()
        ]

public bool $final_step_visible = false;

Select::make('something')
    ->label(__('Something'))
    ->live()
    ->afterStateUpdated(function (?string $state, Set $set) {
        // Check if the step should be visible here
        $this->final_step_visible;
    })
...
Step::make('final_step')
    ->label(__('Final Step'))
    ->visible(fn () => $this->final_step_visible)
    ->schema([
        ...
    ]),

public bool $final_step_visible = false;

Select::make('something')
    ->label(__('Something'))
    ->live()
    ->afterStateUpdated(function (?string $state, Set $set) {
        // Check if the step should be visible here
        $this->final_step_visible;
    })
...
Step::make('final_step')
    ->label(__('Final Step'))
    ->visible(fn () => $this->final_step_visible)
    ->schema([
        ...
    ]),