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:
Jason Parks 2025-03-22 13:30:47 -06:00
parent 530ad31aaa
commit ff3d444b89

View File

@ -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>