From ff3d444b892c0a24c494f24abe6ddaf0ec70b8aa Mon Sep 17 00:00:00 2001
From: Jason Parks <jpraprks@gmail.com>
Date: Sat, 22 Mar 2025 13:30:47 -0600
Subject: [PATCH] fix: prevent form dropdown flicker in Gitea provider modal

Prevents the brief appearance of dropdown options when opening the Edit Gitea Provider modal by:
- Adding onOpenAutoFocus event handler to prevent automatic focus
- Setting autoFocus={false} on the first input field
- Simplifying component state management

This improves the UI experience by eliminating visual artifacts when the dialog opens.
---
 .../settings/git/gitea/edit-gitea-provider.tsx   | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/apps/dokploy/components/dashboard/settings/git/gitea/edit-gitea-provider.tsx b/apps/dokploy/components/dashboard/settings/git/gitea/edit-gitea-provider.tsx
index 1b05b82d..5d2f92d5 100644
--- a/apps/dokploy/components/dashboard/settings/git/gitea/edit-gitea-provider.tsx
+++ b/apps/dokploy/components/dashboard/settings/git/gitea/edit-gitea-provider.tsx
@@ -52,7 +52,6 @@ export const EditGiteaProvider = ({ giteaId }: Props) => {
 	const url = useUrl();
 	const utils = api.useUtils();
 
-	// Handle OAuth redirect results
 	useEffect(() => {
 		const { connected, error } = router.query;
 
@@ -109,7 +108,7 @@ export const EditGiteaProvider = ({ giteaId }: Props) => {
 				clientSecret: gitea.clientSecret || "",
 			});
 		}
-	}, [gitea, form.reset]);
+	}, [gitea, form]);
 
 	const onSubmit = async (values: z.infer<typeof formSchema>) => {
 		await mutateAsync({
@@ -170,8 +169,13 @@ export const EditGiteaProvider = ({ giteaId }: Props) => {
 		);
 	}
 
+	// Function to handle dialog open state
+	const handleOpenChange = (newOpen: boolean) => {
+		setOpen(newOpen);
+	};
+
 	return (
-		<Dialog open={open} onOpenChange={setOpen}>
+		<Dialog open={open} onOpenChange={handleOpenChange}>
 			<DialogTrigger asChild>
 				<Button
 					variant="ghost"
@@ -181,7 +185,7 @@ export const EditGiteaProvider = ({ giteaId }: Props) => {
 					<PenBoxIcon className="size-3.5 text-primary group-hover:text-blue-500" />
 				</Button>
 			</DialogTrigger>
-			<DialogContent>
+			<DialogContent onOpenAutoFocus={(e) => e.preventDefault()}>
 				<DialogHeader>
 					<DialogTitle>Edit Gitea Provider</DialogTitle>
 					<DialogDescription>
@@ -197,7 +201,7 @@ export const EditGiteaProvider = ({ giteaId }: Props) => {
 								<FormItem>
 									<FormLabel>Name</FormLabel>
 									<FormControl>
-										<Input placeholder="My Gitea" {...field} />
+										<Input placeholder="My Gitea" {...field} autoFocus={false} />
 									</FormControl>
 									<FormMessage />
 								</FormItem>
@@ -285,4 +289,4 @@ export const EditGiteaProvider = ({ giteaId }: Props) => {
 			</DialogContent>
 		</Dialog>
 	);
-};
+};
\ No newline at end of file