[Bug] Dialog component causes parent page to scroll to top on form events

[salahbm]

Describe the bug

When using the Dialog component with a form inside, any form events (like search submission or pressing Enter) cause the parent page behind the dialog to scroll to the top. When closing the dialog, the page scrolls back to its original position.

Expected Behavior

• The parent page should maintain its scroll position when form events occur within the Dialog
• Form submissions within the Dialog should not affect the parent page's scroll position
• Closing the Dialog should not cause any scroll position changes

Current Behavior

• Form events within Dialog cause the parent page to scroll to top
• Closing the Dialog causes the page to scroll back to its original position
• This creates a jarring user experience, especially on long pages

Minimal Reproduction Code

<Dialog>
  <DialogContent>
    <Form>
      <form onSubmit={(e) => {
        e.preventDefault();
        // Handle form submission
      }}>
        <input type="text" />
        <button type="submit">Submit</button> // or type='button'
      </form>
    </Form>
  </DialogContent>
</Dialog>

Affected component/components

Dialog, Form

How to reproduce

1. Create a Dialog component with a form inside (e.g., search form)
2. Place this Dialog on a scrollable page
3. Scroll down the parent page
4. Open the Dialog
5. Submit the form or press Enter in any input field
6. Observe that the parent page (behind the Dialog) scrolls to top
7. Close the Dialog
8. Observe that the page scrolls back to the original position

Codesandbox/StackBlitz link

No response

Logs

System Info

Next.js 15+
@radix-ui/react-dialog
shadcn/ui latest version
React 19

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues