Page Scrolls to Top/Bottom on Dialog Modal Close

[harshil-getrevscale]

Bug report

Current Behavior

When a modal is opened and then closed, the page scrolls to the position in the DOM where the modal code is placed. If the modal code is at the bottom of the page, closing the modal causes the page to scroll to the bottom. If the modal code is at the top, closing the modal causes the page to scroll to the top.

https://github.com/user-attachments/assets/0ebefcba-1b81-4906-a2a0-8006944eaf1e

Expected behavior

The page should maintain its current scroll position when the modal is closed, regardless of where the modal code is located in the DOM.

Current code

import { useState } from "react";
import Component from "./Component";
import Modal from "./Model";

const App = () => {

  const [modelOpen, setModelOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setModelOpen(true)} >Click to Open</button>
      <Component color={"blue"} />
      <Component color={"yellow"} />
      <Component color={"blue"} />
      <Component color={"yellow"} />
      <Component color={"blue"} />
      <Component color={"yellow"} />
      <Component color={"blue"} />
      <Component color={"yellow"} />

     // Modal Component
      <Modal open={modelOpen} setOpen={setModelOpen} />
   </div>

  );

};
export default App;

Software	Name(s)	Version
Radix Package(s)	@radix-ui/react-dialog	^1.1.1
React	n/a	^18.2.0
Browser
Assistive tech
Node	n/a	v18.20.3
npm/yarn	npm	10.7.0
Operating System

[xhemals]

I am getting the same issue. I am using the dialog within shadCN sheet. I am using it as a mobile nav, and when i close the nav by clicking a link it scrolls to the top of the page inctead of down to an ID

[ds081227]

I am getting the same issue. I am using the dialog within shadCN sheet. I am using it as a mobile nav, and when i close the nav by clicking a link it scrolls to the top of the page inctead of down to an ID

I am getting the same issue as well and am unable to find a perfect solution, decided to use anchor tags instead of Next Link at the moment to prevent this issue, the downside is that the page will refresh instead of just directly scrolling to the section within the same page.

[mkas3]

I encountered this problem and spent a long time trying to figure out what causes it. I can't name the reason, but the solution for me was to specify onCloseAutoFocus and make preventDefault in it.

[harshil-getrevscale]

I encountered this problem and spent a long time trying to figure out what caused it. I can't name the reason, but the solution for me was to specify onCloseAutoFocus and make preventDefault in it.

yes, it works for me as well, Thank you @mkas3

[Blankeos]

I encountered this problem and spent a long time trying to figure out what causes it. I can't name the reason, but the solution for me was to specify onCloseAutoFocus and make preventDefault in it.

Sorry, where do you specify the onCloseAutoFocus? Is it <Dialog /> I can't see it.

Edit: Okay, I was just impatient lol. I found it from Hiroshilgarash's Issue, then the PR linked to it: https://github.com/saga-web-engineer/relumo/pull/63. it is on <Dialog.Content onCloseAutoFocus={(e) => e.preventDefault()} />