Filament•6mo ago

Wizard Step did not auto scroll to reveal heading only its active state and form changed.

I have 8 steps in wizard and after 5 steps, on clicking next, active selection moves to another tab but step did not auto scroll to reveal the next step header, its hidden unless scrolled manually. How do i trigger it to scroll on clicking next.

1 Reply

Majid Al Zariey•4mo ago

For future reference and as this feature is not supported now, Here is a workaround. Step (1) Add this function to your app.js (Make sure to load it in your panel)

window.scrollToElementIfNotVisible = async function (el, parent = null) {
    const rect = await el.getBoundingClientRect();
    const parentRect = parent ? await parent.getBoundingClientRect() : {
        top: 0,
        left: 0,
        bottom: window.innerHeight,
        right: window.innerWidth
    };

    const isVisible = (
        rect.top >= parentRect.top &&
        rect.left >= parentRect.left &&
        rect.bottom <= parentRect.bottom &&
        rect.right <= parentRect.right
    );

    if (!isVisible) {
        el.scrollIntoView({behavior: 'smooth', block: 'center'});
    }

}

window.scrollToElementIfNotVisible = async function (el, parent = null) {
    const rect = await el.getBoundingClientRect();
    const parentRect = parent ? await parent.getBoundingClientRect() : {
        top: 0,
        left: 0,
        bottom: window.innerHeight,
        right: window.innerWidth
    };

    const isVisible = (
        rect.top >= parentRect.top &&
        rect.left >= parentRect.left &&
        rect.bottom <= parentRect.bottom &&
        rect.right <= parentRect.right
    );

    if (!isVisible) {
        el.scrollIntoView({behavior: 'smooth', block: 'center'});
    }

}

and Add this to your wizard

$wizard->extraAttributes([
                'x-effect' => <<<JS
                    const selector = 'li:nth-child('+(parseInt(step)+1)+')';
                    setTimeout(() => {
                        window.scrollToElementIfNotVisible(\$el.querySelector('.fi-fo-wizard-header').querySelector(selector),
                            \$el.closest('.fi-fo-wizard'))
                    }, 50);
                JS,

            ])

$wizard->extraAttributes([
                'x-effect' => <<<JS
                    const selector = 'li:nth-child('+(parseInt(step)+1)+')';
                    setTimeout(() => {
                        window.scrollToElementIfNotVisible(\$el.querySelector('.fi-fo-wizard-header').querySelector(selector),
                            \$el.closest('.fi-fo-wizard'))
                    }, 50);
                JS,

            ])

Gaming

Programming

Wizard Step did not auto scroll to reveal heading only its active state and form changed.