Filament•9mo ago

Conditional 3rd Step in Wizard (Button Doesn't Change from Create to Next, or vice versa).

I have a toggle component in step 2, when if toggled on, makes step 3 visible. This works fine using the visible method on step 3 with Get $get('toggle') after toggling it on in Step 2. However, the wizard submit button doesn't change to "Next", but instead remains "Create" in Step 2. If I back out to Step 1 with the toggle on in step 2, then back to step 2, the button does change to "Next" on the 2nd time through leading me to believe it was a reactive issue, however, I cannot figure out how to refresh the steps on the toggle resulting in the button change. Also, unless going back and forth through as described above, I cannot get to the otherwise visible in the header, Step 3. I am trial and error'd out on this. Any hints in the right direction is appreciated!

1 Reply

buhbailey•9mo ago

I've added the applicable shortened version of the code,

public function getSteps(): array
{
  return [
    Step::make('Step1')
      ->schema([
        TextInput::make('name')
      ]),
    Step::make('Step2')
      ->schema([
        Toggle::make('toggle')
          ->live()
    ]),
    Step::make('Step3')
      ->visible(fn(Get $get)=> $get('toggle')
      ->schema([
        TextInput::make('address')
      ])
  ]
}

public function getSteps(): array
{
  return [
    Step::make('Step1')
      ->schema([
        TextInput::make('name')
      ]),
    Step::make('Step2')
      ->schema([
        Toggle::make('toggle')
          ->live()
    ]),
    Step::make('Step3')
      ->visible(fn(Get $get)=> $get('toggle')
      ->schema([
        TextInput::make('address')
      ])
  ]
}

. again this works (showing and hiding step 3), however, the 'Create' Button in Step two remains, even after adding the third step. Also, after toggling 'toggle' on for Step 3 to be visible, we cannot move to step three unless backing out to step 1 then back through to step 3. any ideas other than possibly having to extend form and dynamically change the button text of the wizard or use custom JavaScript/Alpine.js? I would think there would be a filament way to add a step, so I prefer to not recreate the wheel, if possible.

Gaming

Programming

Conditional 3rd Step in Wizard (Button Doesn't Change from Create to Next, or vice versa).