#Popover trigger scrolls page to top within long table in Firefox

5 messages · Page 1 of 1 (latest)

radiant jetty
#

I’m using an ActionIcon as the trigger for a controlled Mantine (v 8.3.10) Popover. Everything works normally until I scroll down the page. After scrolling, whenever I click the ActionIcon, the browser (Firefox) instantly scrolls back to the top of the page. The popover still opens, but the sudden scroll jump makes the UI unusable.

I also tried toggling the withinPortal prop, but it makes no difference.

It seems to work normally in Safari, so this might be Firefox–specific.
Can anyone confirm whether they also experience this in Firefox 146.0.0 (aarch64)?

To make sure it wasn’t something in my own code, I reproduced the issue in a minimal StackBlitz example:

https://stackblitz.com/edit/mantine-popover-scrolls-top?file=src%2FApp.tsx

Does anyone know if I’m using the Popover/trigger incorrectly, or if this might be a Firefox-related bug? Any help is appreciated!

Thanks! 🙏

DK

Next generation frontend tooling. It's fast!

stuck sphinx
radiant jetty
#

Thank you very much for your response.

Additional Findings

I suspected the issue might be related to focus switching, so I tried tracing focus events with:

document.addEventListener("focusin", e => {
  console.trace("Focus moved to:", e.target);
});

It turns out the culprit is the autoFocus prop on one of the buttons inside the Popover:

<Button {...} autoFocus />

When the popover opens, that button automatically receives focus, and in Firefox this seems to trigger the jump back to the top of the page. If I remove the autoFocus prop, the scrolling issue disappears.

I’m not sure whether there’s anything we can do about this, but I wanted to share my findings in case it helps narrow down the cause.

naive pewter
radiant jetty
#

Hi @naive pewter , in my case I removed the ⁨autoFocus⁩ attribute from the ⁨Button⁩ instance. I didn't investigate further the issue because the said "workaround" solved the unwanted scrolling for me.