mirror of
https://github.com/Dokploy/dokploy
synced 2025-06-26 18:27:59 +00:00
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.
This commit is contained in:
parent
530ad31aaa
commit
ff3d444b89
@ -52,7 +52,6 @@ export const EditGiteaProvider = ({ giteaId }: Props) => {
|
|||||||
const url = useUrl();
|
const url = useUrl();
|
||||||
const utils = api.useUtils();
|
const utils = api.useUtils();
|
||||||
|
|
||||||
// Handle OAuth redirect results
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const { connected, error } = router.query;
|
const { connected, error } = router.query;
|
||||||
|
|
||||||
@ -109,7 +108,7 @@ export const EditGiteaProvider = ({ giteaId }: Props) => {
|
|||||||
clientSecret: gitea.clientSecret || "",
|
clientSecret: gitea.clientSecret || "",
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}, [gitea, form.reset]);
|
}, [gitea, form]);
|
||||||
|
|
||||||
const onSubmit = async (values: z.infer<typeof formSchema>) => {
|
const onSubmit = async (values: z.infer<typeof formSchema>) => {
|
||||||
await mutateAsync({
|
await mutateAsync({
|
||||||
@ -170,8 +169,13 @@ export const EditGiteaProvider = ({ giteaId }: Props) => {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Function to handle dialog open state
|
||||||
|
const handleOpenChange = (newOpen: boolean) => {
|
||||||
|
setOpen(newOpen);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Dialog open={open} onOpenChange={setOpen}>
|
<Dialog open={open} onOpenChange={handleOpenChange}>
|
||||||
<DialogTrigger asChild>
|
<DialogTrigger asChild>
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
@ -181,7 +185,7 @@ export const EditGiteaProvider = ({ giteaId }: Props) => {
|
|||||||
<PenBoxIcon className="size-3.5 text-primary group-hover:text-blue-500" />
|
<PenBoxIcon className="size-3.5 text-primary group-hover:text-blue-500" />
|
||||||
</Button>
|
</Button>
|
||||||
</DialogTrigger>
|
</DialogTrigger>
|
||||||
<DialogContent>
|
<DialogContent onOpenAutoFocus={(e) => e.preventDefault()}>
|
||||||
<DialogHeader>
|
<DialogHeader>
|
||||||
<DialogTitle>Edit Gitea Provider</DialogTitle>
|
<DialogTitle>Edit Gitea Provider</DialogTitle>
|
||||||
<DialogDescription>
|
<DialogDescription>
|
||||||
@ -197,7 +201,7 @@ export const EditGiteaProvider = ({ giteaId }: Props) => {
|
|||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>Name</FormLabel>
|
<FormLabel>Name</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input placeholder="My Gitea" {...field} />
|
<Input placeholder="My Gitea" {...field} autoFocus={false} />
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
Loading…
Reference in New Issue
Block a user