From 96903dec2ba5f024e03b9b98969bf321c0c9a6a7 Mon Sep 17 00:00:00 2001
From: alikia2x <alikia2x@outlook.com>
Date: Fri, 30 May 2025 03:24:37 +0800
Subject: [PATCH] fix: prevent scrolling of body when model dialog is shown

---
 packages/next/app/signup/SignUpForm.tsx |  2 +-
 packages/next/components/ui/Dialog.tsx  | 12 ++++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/next/app/signup/SignUpForm.tsx b/packages/next/app/signup/SignUpForm.tsx
index e511414..f1e6f20 100644
--- a/packages/next/app/signup/SignUpForm.tsx
+++ b/packages/next/app/signup/SignUpForm.tsx
@@ -165,7 +165,7 @@ const SignUpForm: React.FC<RegistrationFormProps> = ({ backendURL }) => {
 			>
 				Show Dialog
 			</FilledButton>
-			<FilledButton type="submit" disabled={loading}>
+			<FilledButton type="submit" disabled={loading} tabIndex={1}>
 				{!loading ? <span>注册</span> : <LoadingSpinner />}
 			</FilledButton>
 			<Portal>
diff --git a/packages/next/components/ui/Dialog.tsx b/packages/next/components/ui/Dialog.tsx
index c866b6d..f12e0f0 100644
--- a/packages/next/components/ui/Dialog.tsx
+++ b/packages/next/components/ui/Dialog.tsx
@@ -1,6 +1,17 @@
 import { motion, AnimatePresence } from "framer-motion";
 import React from "react";
 import { TextButton } from "./Buttons/TextButton";
+import { useEffect } from "react";
+
+export const useDisableBodyScroll = (open: boolean) => {
+	useEffect(() => {
+		if (open) {
+			document.body.style.overflow = "hidden";
+		} else {
+			document.body.style.overflow = "unset";
+		}
+	}, [open]);
+};
 
 interface DialogProps {
 	show: boolean;
@@ -36,6 +47,7 @@ export const DialogButtonGroup: React.FC<DialogButtonGroupProps> = ({ children }
 };
 
 export const Dialog: React.FC<DialogProps> = ({ show, children }: DialogProps) => {
+	useDisableBodyScroll(show);
 	return (
 		<AnimatePresence>
 			{show && (