stuartcusack
stuartcusack
PostsComments
FFilament
Created by Matthew on 9/2/2024 in #❓┊help
wizard scroll bar solution?
Here's a complicated workaround for auto wizard header scrolling in v3.2.122 Add this to your wizard definition 
->previousAction(
  function (Action $action) {
    return $action->extraAttributes([
      'x-on:click' => new HtmlString('$dispatch(\'scrollWizardHeaderPrev\')'),
    ]);
  }
)
->registerListeners([
  'wizard::nextStep' => [
    function (Wizard $component, string $statePath, int $currentStepIndex): void {
      /** @var LivewireComponent $livewire */
      $livewire = $component->getLivewire();
      $livewire->dispatch('next-wizard-step-custom', nextStep: $currentStepIndex + 1);
    },
  ],
])
->previousAction(
  function (Action $action) {
    return $action->extraAttributes([
      'x-on:click' => new HtmlString('$dispatch(\'scrollWizardHeaderPrev\')'),
    ]);
  }
)
->registerListeners([
  'wizard::nextStep' => [
    function (Wizard $component, string $statePath, int $currentStepIndex): void {
      /** @var LivewireComponent $livewire */
      $livewire = $component->getLivewire();
      $livewire->dispatch('next-wizard-step-custom', nextStep: $currentStepIndex + 1);
    },
  ],
])
And then in my livewire component: 
@script
   <script>
     window.addEventListener("scrollWizardHeaderPrev", function() {
         let steps = document.querySelectorAll('li.fi-fo-wizard-header-step');
         steps.forEach(function (step, i) {
           if(step.classList.contains('fi-active')) {
             let el = steps[i - 1]
             el.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' })
           }
        });
    });

    $wire.on('next-wizard-step-custom', (event) => {
      let elIndex = event.nextStep + 1
      let el = document.querySelector('ol.fi-fo-wizard-header li:nth-child(' + elIndex +')');
      el.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' })
    });
  </script>
@endscript
@script
   <script>
     window.addEventListener("scrollWizardHeaderPrev", function() {
         let steps = document.querySelectorAll('li.fi-fo-wizard-header-step');
         steps.forEach(function (step, i) {
           if(step.classList.contains('fi-active')) {
             let el = steps[i - 1]
             el.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' })
           }
        });
    });

    $wire.on('next-wizard-step-custom', (event) => {
      let elIndex = event.nextStep + 1
      let el = document.querySelector('ol.fi-fo-wizard-header li:nth-child(' + elIndex +')');
      el.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' })
    });
  </script>
@endscript
I have to use different methods for previous and next because wizard:previousStep isn't dispatched by filament currently.
8 replies