Why does the modal dialog allow dismissal by clicking outside by default?

[tonyxiao]

Took me a solid hour to figure out that modal dialog can still be dismissed by clicking outside, and in order to change this behavior we need to pass onPointerDownOutside={(e)> e.preventDefault()}. This is surprising, esp given that the DialogContentModal component passes disableOutsidePointerEvents to the DismissableLayer component. At the minimum this common need should be documented, but i'm more interested in why clicks outside are not trapped by default and results in dialog closing.

[benoitgrelard]

but i'm more interested in why clicks outside are not trapped by default and results in dialog closing.

Hey @tonyxiao, closing a dialog when clicking outside of it is a very common feature of basic dialogs.

Here's an extract from the aria guidelines for the dialog pattern:

Inert content outside an active dialog is typically visually obscured or dimmed so it is difficult to discern, and in some implementations, attempts to interact with the inert content cause the dialog to close.

We decided that the functionality is common enough that it should be on by default with an easy way to prevent the default behaviour.

Conversely, for AlertDialog which is used in more critical scenarios, this is always disabled.

Hope that sheds some light on the reasoning.

✌️

[benoitgrelard]

Do you want to submit a PR for this?

[tonyxiao]

Sure happy to submit a PR. Can you help clarify the difference between modal vs. non modal? Because I'm not personally sure yet.

[benoitgrelard]

Modality, ie. a container being "modal" essentially refers to the fact that navigation/interaction is restricted to that container, and the rest of the page is "hidden". In practice this means:

• focus is trapped to that container
• content outside is non-interactive (ie. can't click on elements, can't scroll outside)
• content outside is hidden from screen-readers
• there might be a visual overlay

[tonyxiao]

content outside is non-interactive
To clarify, this is content outside is non-interactive unless the modal is first dismissed (e.g. by clicking on clicking outside, so in practice a double click would allow the content outside to be interactive)

[benoitgrelard]

Correct, non-interactive when open.

[lomocc]

Agree, this may cause the user to accidentally close the dialog, e.g. I have filled out the form and accidentally closed the dialog. So I had to fill out the form again.

[iamvanja]

...that it should be on by default with an easy way to prevent the default behaviour

While I am not arguing the default, Is the current way really an easy way though? Isn't this discussion a testament to it being contrary?

Looking at the docs for example, it is not easy for me at a glance to distinguish the difference between onPointerDownOutside and onInteractOutside. In fact, I am still not sure. Is it that onInteractOutside includes both focus and pointer events while onPointerDownOutside is only for point events? Assuming that I am right, OP potentially has a bug where a focus does close the dialog whereas that is probably not what they wanted.

Wouldn't it be more obvious to have a prop like disableOverlayClick, disableEscKey or providing only a unified handler onOpenChange with reason, target or some identifiable field that allows for an easy exclusion on where the attempt to open/close originated from?

For example, while I do not think that putting a form in a Dialog component is the best UX generally speaking, the fact that Dialog:

• destroys an instance when opened/closed (losing form state)
• closes by default (and no obvious and documented way of preventing this behavior)

means that this is UX is even worse than it could be.

[TheMikeyRoss]

I tried this

<Dialog modal={false} onPointerDownOutside={(e) => e.preventDefault()}>

and it not working. Clicking outside dismisses the modal. Any tips on how to disable dismissal on clicking outside the dialog?

[iamvanja]

There is also onInteractOutside.

[zaaakher]

I tried this

<Dialog modal={false} onPointerDownOutside={(e) => e.preventDefault()}>

and it not working. Clicking outside dismisses the modal. Any tips on how to disable dismissal on clicking outside the dialog?

You should pass onPointerDownOutside={(e) => e.preventDefault()} to <DialogContent> component and not <Dialog>

[otthry]

I applied the same source, but the dimmed overlay area disappeared and the body became scrollable, making it unusable. Is there an alternative?

[dwarr-eb]

An example component that uses the Radix Dialog, and avoids the default event behavior:

import React from "react";
import * as Dialog from "@radix-ui/react-dialog";

interface CustomDialogProps {
    isOpen: boolean;
    onClose: () => void;
    children: React.ReactNode;
}

export const CustomDialog: React.FC<CustomDialogProps> = ({ isOpen, onClose, children }) => {
    /** Generic function that prevents any default event behavior. */
    const avoidDefaultDomBehavior = (e: Event) => {
        e.preventDefault();
    };

    return (
        <Dialog.Root open={isOpen} onOpenChange={onClose}>
            <Dialog.Portal>
                <Dialog.Overlay>
                    <Dialog.Content
                        onPointerDownOutside={avoidDefaultDomBehavior}
                        onInteractOutside={avoidDefaultDomBehavior}
                    >
                        {children}
                    </Dialog.Content>
                </Dialog.Overlay>
            </Dialog.Portal>
        </Dialog.Root>
    );
};

The components within the dialog can have a button/interactable element that closes the dialog.