Open chaikovskiy99 opened 3 months ago
I'm not sure, but I guess since every button has a type of "submit" by default. Setting the button type of the close button as "button" should fix your problem, in you dialog.tsx/jsx
type="button"
to the DialogPrimitive.Close component like this:
<DialogPrimitive.Close
type="button"
className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
<X className="h-4 w-4" />
<span className="sr-only">Close</span>
</DialogPrimitive.Close>
Let me know if it works with you!
I'm not sure, but I guess since every button has a type of "submit" by default. Setting the button type of the close button as "button" should fix your problem, in you
dialog.tsx/jsx
* Scroll to the **DialogContent** * Inside it find the **DialogPrimitive.Close** component * add the `type="button" ` to the **DialogPrimitive.Close** component like this:
<DialogPrimitive.Close type="button" className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"> <X className="h-4 w-4" /> <span className="sr-only">Close</span> </DialogPrimitive.Close>
Let me know if it works with you!
I tried that, however, it didn't work - same behavior. Nevertheless, for the time being I am going to use mode: 'onSubmit', that works well and I think it's enough for my current requirement. Thanks for your prompt reply.
I have the same problem,there is a form inside the dialog, input some words in the Input element,the words will selected when i click other place
it will selected
Describe the bug
I have a shadcn dialog, there is a form inside it that uses react-hook-forms and zod validation, the problem is that when I have mode: all selected like this,![image](https://github.com/shadcn-ui/ui/assets/4904151/1fe5dd12-6350-4ad8-a45b-c528a8ece42d)
useForm({mode: 'all'})
, on clicking the close dialog button, I get the validation error messages displayed since I am using formState errors property to display validation errors. I have to click the close button twice to close the dialog. Is this expected behavior?Affected component/components
Dialog
How to reproduce
Codesandbox/StackBlitz link
No response
Logs
No response
System Info
Before submitting