Modal open scrolls the page to the modal root, similar to #20241 not fixed by #20242

[Apollo139]

Package

filament/filament

Package Version

v5.7.5

Laravel Version

v13.23.0

Livewire Version

v4.3.4

PHP Version

PHP 8.4.23

Problem description

Since upgrading to v5.7.x, opening any modal (action modals, relation manager modals, etc.) on a page that is scrolled or whose modal root sits below the fold, makes the page visibly scroll/jump downward at the moment the modal opens. The modal itself renders correctly, the page behind it scrolls.

This looks like the unfixed other half of #20241. That issue reported the page scroll-jumping on modal close, caused by v5.7.0 removing the .noscroll modifier from the modal's x-trap directive when scroll-locking moved into modal.js. The fix in #20242 addressed only the close path: x-trap got .noreturn, and return-focus moved into JS with an explicit previouslyFocusedElement.focus({ preventScroll: true }) (packages/support/resources/js/components/modal.js, and the same pattern in packages/actions/resources/js/components/modals.js).

The open path still has the same issue. So on open, the browser scrolls the page toward the focused element and the user sees the "slip down".

Before v5.7.0, x-trap.noscroll suppressed this on both open and close. After #20242, close is protected by preventScroll: true but open is not.

Expected behavior

Opening a modal should not change the page's scroll position, matching the pre-5.7.0 behavior (x-trap.noscroll) and the close-side behavior restored by #20242. The open-time initial focus should be applied with preventScroll: true (or the .noscroll modifier restored on x-trap, since documentElement scroll-locking is now handled by modal.js anyway).

Steps to reproduce

1.Open the "Modal scroll repro" page, it has a header action Open modal.
2. Stay scrolled at the top of the page and click "Open modal".
3. The page behind the modal scrolls down

Reproduction repository (issue will be closed if this is not valid)

https://github.com/Apollo139/filament-modal-open-scroll-repro

Relevant log output

[danharrin]

Can you attach screen recordings of the behaviour you are observing please in the reproduction repo?

[Apollo139]

Hi Dan! So just dug deeper now, adding here my findings, maybe it will help someone else.
Apologies for the confusion, and thanks for asking for the recording, turns out the issue was on my side and not Filament's.

So what happened?
My app was serving a stale public/js/filament/actions/actions.js, published back when the project was on v5.7.1 and never refreshed since. The stale bundle still had restoreFocusedElement calling focus({ preventScroll: false }), the pre-#20242 code, while v5.7.5's vendor/filament/actions/dist/index.js correctly has preventScroll: true.

The reason it went stale - my composer.json was missing @php artisan filament:upgrade from post-autoload-dump. filament:install appends that automatically, but this project was scaffolded without running it, so the line was never there in the first place, and honestly I don't remember why, maybe it is just something that I've missed from v3 and till now.
php artisan filament:assets resolved it completely. The open path in v5.7.5 is fine and #20242 does cover it.

One narrow case that does still reproduce on v5.7.5 with correctly published assets - not sure that it even worth fixing, but still letting you know -

A modal with no tabbable element at all still scrolls the page to the bottom when it opens.

Action::make('example')
    ->modalContent(new HtmlString('<p>Nothing tabbable in here.</p>'))
    ->modalCloseButton(false)
    ->modalSubmitAction(false)
    ->modalCancelAction(false)

x-trap (which no longer carries .noscroll) activates while .fi-modal-window is still display: none, finds no tabbable element inside, and falls back to the .fi-modal root. That root is position: static and sits at the end of the document, so focusing it with preventScroll: false scrolls the page all the way down.

So, apologies again, and a huge thanks to you and the team for all your work!