From 6d1485d16847a657c24a6eb78d9f8b557b033893 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Wed, 17 Sep 2025 21:51:46 +0800
Subject: [PATCH] fix: reset state on dialog close and improve dialog open
 handling

---
 .../CreateIdentityProviderDialog.tsx          | 37 +++++++++++++++++--
 web/src/components/Settings/SSOSection.tsx    | 10 ++++-
 web/src/components/ui/dialog.tsx              | 13 ++++++-
 3 files changed, 54 insertions(+), 6 deletions(-)

diff --git a/web/src/components/CreateIdentityProviderDialog.tsx b/web/src/components/CreateIdentityProviderDialog.tsx
index 776bb30ce..da5b2a869 100644
--- a/web/src/components/CreateIdentityProviderDialog.tsx
+++ b/web/src/components/CreateIdentityProviderDialog.tsx
@@ -129,8 +129,36 @@ function CreateIdentityProviderDialog({ open, onOpenChange, identityProvider, on
   const [selectedTemplate, setSelectedTemplate] = useState<string>("GitHub");
   const isCreating = identityProvider === undefined;
 
+  // Reset state when dialog is closed
   useEffect(() => {
-    if (identityProvider) {
+    if (!open) {
+      // Reset to default state when dialog is closed
+      setBasicInfo({
+        title: "",
+        identifierFilter: "",
+      });
+      setType(IdentityProvider_Type.OAUTH2);
+      setOAuth2Config({
+        clientId: "",
+        clientSecret: "",
+        authUrl: "",
+        tokenUrl: "",
+        userInfoUrl: "",
+        scopes: [],
+        fieldMapping: FieldMapping.fromPartial({
+          identifier: "",
+          displayName: "",
+          email: "",
+        }),
+      });
+      setOAuth2Scopes("");
+      setSelectedTemplate("GitHub");
+    }
+  }, [open]);
+
+  // Load existing identity provider data when editing
+  useEffect(() => {
+    if (open && identityProvider) {
       setBasicInfo({
         title: identityProvider.title,
         identifierFilter: identityProvider.identifierFilter,
@@ -142,10 +170,11 @@ function CreateIdentityProviderDialog({ open, onOpenChange, identityProvider, on
         setOAuth2Scopes(oauth2Config.scopes.join(" "));
       }
     }
-  }, [identityProvider]);
+  }, [open, identityProvider]);
 
+  // Load template data when creating new IDP
   useEffect(() => {
-    if (!isCreating) {
+    if (!isCreating || !open) {
       return;
     }
 
@@ -162,7 +191,7 @@ function CreateIdentityProviderDialog({ open, onOpenChange, identityProvider, on
         setOAuth2Scopes(oauth2Config.scopes.join(" "));
       }
     }
-  }, [selectedTemplate]);
+  }, [selectedTemplate, isCreating, open]);
 
   const handleCloseBtnClick = () => {
     onOpenChange(false);
diff --git a/web/src/components/Settings/SSOSection.tsx b/web/src/components/Settings/SSOSection.tsx
index 5a2735b9e..0dfd7b94e 100644
--- a/web/src/components/Settings/SSOSection.tsx
+++ b/web/src/components/Settings/SSOSection.tsx
@@ -54,6 +54,14 @@ const SSOSection = () => {
     setEditingIdentityProvider(undefined);
   };
 
+  const handleDialogOpenChange = (open: boolean) => {
+    setIsCreateDialogOpen(open);
+    // Clear editing state when dialog is closed
+    if (!open) {
+      setEditingIdentityProvider(undefined);
+    }
+  };
+
   return (
     <div className="w-full flex flex-col gap-2 pt-2 pb-4">
       <div className="w-full flex flex-row justify-between items-center gap-1">
@@ -100,7 +108,7 @@ const SSOSection = () => {
 
       <CreateIdentityProviderDialog
         open={isCreateDialogOpen}
-        onOpenChange={setIsCreateDialogOpen}
+        onOpenChange={handleDialogOpenChange}
         identityProvider={editingIdentityProvider}
         onSuccess={handleDialogSuccess}
       />
diff --git a/web/src/components/ui/dialog.tsx b/web/src/components/ui/dialog.tsx
index fdaedf90f..9dd549b16 100644
--- a/web/src/components/ui/dialog.tsx
+++ b/web/src/components/ui/dialog.tsx
@@ -74,7 +74,18 @@ const DialogContent = React.forwardRef<
 >(({ className, children, showCloseButton = true, size, ...props }, ref) => (
   <DialogPortal>
     <DialogOverlay />
-    <DialogPrimitive.Content ref={ref} className={cn(dialogContentVariants({ size }), className)} {...props}>
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(dialogContentVariants({ size }), className)}
+      onOpenAutoFocus={(e) => {
+        e.preventDefault();
+      }}
+      onCloseAutoFocus={(e) => {
+        e.preventDefault();
+        document.body.style.pointerEvents = "auto";
+      }}
+      {...props}
+    >
       <div className="overflow-y-auto overflow-x-hidden flex-1 flex flex-col gap-4">{children}</div>
       {showCloseButton && (
         <DialogPrimitive.Close className="ring-offset-background data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">