Option to Disable Auto-Closing on Overlay Click for Dialog/Drawer Components

[otthry]

Hello I'm writing to report an issue related to the overlay feature integrated within the Dialog and Drawer components of the shadcn UI.

Issue Description: Currently, when the overlay (the dimmed area outside of the Dialog or Drawer) is clicked by the users, the Dialog or Drawer components automatically close. However, for our application, we require functionality where clicking on the overlay does not close these components.

Expected Behavior: We need the Dialog and Drawer components to remain open even when the overlay is clicked. This behavior is essential for our use case as we want to keep the main content visible and interactive without dismissing it unintentionally by an overlay click.

it is not work : <DialogContent className="sm:max-w-[425px]" onPointerDownOutside={(e) => { e.preventDefault(); }}

Request: Could you please develop and integrate the option to disable the auto-closing feature when the overlay is clicked? The ability to toggle this behavior on and off as needed would be greatly appreciated.

Thank you for your attention to this matter. We look forward to a resolution that will enhance the flexibility of these UI components.

[otthry]

https://github.com/radix-ui/primitives/discussions/1997 i got a issue that's same

[imopbuilder]

@otthry

Update the DialogContent component

<DialogContent
	className='sm:max-w-[425px]'
	onEscapeKeyDown={(e) => e.preventDefault()}
	onPointerDown={(e) => e.preventDefault()}
	onInteractOutside={(e) => e.preventDefault()}
>
	...
</DialogContent>

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

[Hasankanso]

Preventing on pointer down will cause input becoming unclickable, a minimal solution would be:

        <DialogContent onInteractOutside={(e) => e.preventDefault()}>
          ...
        </DialogContent>

[viniciusofp]

I don't want to disable this on all my Dialogs, so I took @Hasankanso 's answer and created a prop:

interface DialogContentProps
  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
  disableOutsideClick?: boolean;
}

const DialogContent = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Content>,
  DialogContentProps
>(({ className, children, disableOutsideClick, ...props }, ref) => (

...

    <DialogPrimitive.Content
      onInteractOutside={
        disableOutsideClick
          ? (e) => e.preventDefault()
          : props.onInteractOutside
      }

And in the Dialog that I want to disable outside click:

<DialogContent disableOutsideClick>