F
Filament•4w ago
Jesse

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

Hi! I am using a Wizard in a 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
5 Replies
Jesse
JesseOP•4w ago
Here you can see the code of my form: 
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()
        ]
raheel3031
raheel3031•4w ago
@Jesse you are using 2 times product_id. Also in step 2
ChesterS
ChesterS•4w ago
Heh I had the exact same issue. Unfortunately, I couldn't find a propert solution. I ended up adding a workaround, something like this 
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([
        ...
    ]),
There's probably a better way to do it but I wanted a quick solution. If you want to see the the actual code for this, take a look at 
vendor/filament/forms/resources/views/components/wizard.blade.php
vendor/filament/forms/resources/views/components/wizard.blade.php
maybe you can think of something I didn't.
Solution
Jesse
Jesse•4w ago
@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...
ChesterS
ChesterS•4w ago
Awesome, thanks. That's what I mean 'a proper solution' 😂

Did you find this page helpful?