How to Programmatically Navigate to a Specific Step in a Wizard

How can I programmatically navigate to step 2 ("Delivery") using a function call or dispatch in Livewire?

I tried:

Livewire.dispatch('next-wizard-step', { statePath: 'mountedTableActionsData.2' });

Livewire.dispatch('next-wizard-step', { statePath: 'mountedTableActionsData.2' });

However, it's not behaving accurately. Sometimes it goes to step 2, but other times it skips to step 3.

 Wizard::make([
    Wizard\Step::make('Order')
        ->schema([
            // ...
        ]),
    Wizard\Step::make('Delivery')
        ->schema([
            // ...
        ]),
    Wizard\Step::make('Billing')
        ->schema([
            // ...
        ]),
])

 Wizard::make([
    Wizard\Step::make('Order')
        ->schema([
            // ...
        ]),
    Wizard\Step::make('Delivery')
        ->schema([
            // ...
        ]),
    Wizard\Step::make('Billing')
        ->schema([
            // ...
        ]),
])

Solution

Wizard::make([...
])
->extraAlpineAttributes(['@update-step.window' => 'step = event.detail.newStep'])

Wizard::make([...
])
->extraAlpineAttributes(['@update-step.window' => 'step = event.detail.newStep'])

$dispatch('update-step', {newStep: 'delivery'})

$dispatch('update-step', {newStep: 'delivery'})

Jump to solution

Filament•2y ago•

7 replies

technocrat

How to Programmatically Navigate to a Specific Step in a Wizard

How can I programmatically navigate to step 2 ("Delivery") using a function call or dispatch in Livewire?

I tried:

Livewire.dispatch('next-wizard-step', { statePath: 'mountedTableActionsData.2' });

Livewire.dispatch('next-wizard-step', { statePath: 'mountedTableActionsData.2' });

However, it's not behaving accurately. Sometimes it goes to step 2, but other times it skips to step 3.

 Wizard::make([
    Wizard\Step::make('Order')
        ->schema([
            // ...
        ]),
    Wizard\Step::make('Delivery')
        ->schema([
            // ...
        ]),
    Wizard\Step::make('Billing')
        ->schema([
            // ...
        ]),
])

 Wizard::make([
    Wizard\Step::make('Order')
        ->schema([
            // ...
        ]),
    Wizard\Step::make('Delivery')
        ->schema([
            // ...
        ]),
    Wizard\Step::make('Billing')
        ->schema([
            // ...
        ]),
])

Solution

Wizard::make([...
])
->extraAlpineAttributes(['@update-step.window' => 'step = event.detail.newStep'])

Wizard::make([...
])
->extraAlpineAttributes(['@update-step.window' => 'step = event.detail.newStep'])

$dispatch('update-step', {newStep: 'delivery'})

$dispatch('update-step', {newStep: 'delivery'})

Jump to solution

How to Programmatically Navigate to a Specific Step in a Wizard

How to Programmatically Navigate to a Specific Step in a Wizard

Similar Threads

Similar Threads

Similar Threads