https://www.fliprocket.ai/assets/controllers/wizard_scroll_controller-tWz1Mq3.js

1import { Controller } from '@hotwired/stimulus';
2
3/*
4 * Scope Wizard (GH #226 M4): after Next advances the step, scroll the
5 * walk back to its top — a long configurator step otherwise leaves the
6 * viewport stranded at the footer. Listens for the component's
7 * `wizard:step-advanced` browser event (dispatched server-side from
8 * nextStep), which the live runtime fires AFTER the morph completes, so
9 * the new step is already in the DOM when we scroll.
10 *
11 * Attached to the live root via attributes.defaults (the NotificationBell
12 * pattern). scrollIntoView walks every ancestor scrollport, so it works
13 * regardless of which container scrolls (since GH #253 that's the app
14 * shell's <main> on every breakpoint). The root's `scroll-mt-4` class
15 * gives the stepper row breathing room at the top of the scrollport.
16 */
17export default class extends Controller {
18    connect() {
19        this.onAdvance = () => {
20            this.element.scrollIntoView({ behavior: 'smooth', block: 'start' });
21        };
22        this.element.addEventListener('wizard:step-advanced', this.onAdvance);
23    }
24
25    disconnect() {
26        this.element.removeEventListener('wizard:step-advanced', this.onAdvance);
27    }
28}