Wizard not scrolling to top on next

[emmexx]

Package

filament/filament

Package Version

v3.0.68

Laravel Version

v10.22.0

Livewire Version

v3.0.5

PHP Version

PHP 8.1.23

Problem description

The contest is a wizard used not in a modal. If the content of a step is very long (window height) when you click on Next the page doesn't scroll to top. This happens whenever I have to scroll the page to get to the Next button. This behavior doesn't happen when clicking on the Previous button. I use Firefox.

Expected behavior

The page should scroll to the top when clicking on Next.

Steps to reproduce

Create a wizard. In the 1st step put a placeholder whose content is a long text. In the 2nd step put various controls that make the content be higher that the view of the main container of the page. Start the wizard. Scroll to the Next button of the 1st step and click on it. The 2nd step is not displayed starting from the top but midway, you have to scroll up to view the content from the beginning.

Reproduction repository

https://github.com/emmexx/filament-scroll-top/tree/master

Relevant log output

No response

[github-actions[bot]]

Hey @emmexx! We're sorry to hear that you've hit this issue. 💛

However, it looks like you forgot to fill in the reproduction repository URL. Can you edit your original post and then we'll look at your issue?

We need a public GitHub repository which contains a Laravel app with the minimal amount of Filament code to reproduce the problem. Please do not link to your actual project, what we need instead is a minimal reproduction in a fresh project without any unnecessary code. This means it doesn't matter if your real project is private / confidential, since we want a link to a separate, isolated reproduction. That would allow us to download it and review your bug much easier, so it can be fixed quicker. Please make sure to include a database seeder with everything we need to set the app up quickly.

[emmexx]

? I created a gist with the code of a Create class and put the link in the repository field, what's wrong with that?

[zepfietje]

Please read the entire bot comment above. We need a full repository we can clone and use to reproduce the issue.

[emmexx]

Sorry, I thought a simple file was enough. I created a repository example: https://github.com/emmexx/filament-scroll-top/blob/master/README.md A moderator should change the repository link in this issue. Sorry, 1st time creating a github repository, I hope I did everything right. The relevant code is in app/Filament/Resources/TestResource/Pages/CreateTest.php Instructions are on main branch, anyway I copy them here:

In the .env file change:

DB_CONNECTION=sqlite
DB_DATABASE=/path/to/db.sqlite

Access using user [email protected], password abc123.

Click on resource Tests and create a new test.

Scroll to bottom of 1st step, check the 3 toggles and click on Next.

The 2nd step doesn't scroll to top.

[github-actions[bot]]

Thank you for providing reproduction steps! Reopening the issue now.

[zepfietje]

Could you please test if this issue occurs on the latest versions of Filament and Livewire?

[emmexx]

In my composer.lock file there's:

 "name": "livewire/livewire",
 "version": "v3.0.5"

"name": "filament/filament",
"version": "v3.0.68",

The scroll problem is still there.

[emmexx]

As a workaround I used the code suggested here: https://github.com/filamentphp/filament/discussions/9022#discussioncomment-7277132

[zepfietje]

@cheesegrits, might this be related of the final part you mentioned in https://github.com/filamentphp/filament/pull/9084?

[cheesegrits]

@zepfietje I doubt it's directly related, but probably needs some baked in scrollInToView() code on next/prev actions. I'll take a look over the weekend.

[danharrin]

Safari only. Works in Chrome. We already have scrollIntoView()