Nested Dialog

Rendering a modal Dialog to confirm an action inside another modal dialog using React.

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
import {
  Button,
  Dialog,
  DialogDescription,
  DialogDismiss,
  DialogHeading,
  VisuallyHidden,
} from "@ariakit/react";
import { useState } from "react";
import "./style.css";

export default function Example() {
  const [cartOpen, setCartOpen] = useState(false);
  const [removing, setRemoving] = useState("");
  const [products, setProducts] = useState([
    "Summer T-Shirt",
    "Warm Jacket",
    "Slim Shorts",
  ]);

  const confirmRemove = () => {
    setProducts((products) => {
      return products.filter((product) => product !== removing);
    });
  };

  return (
    <>
      <Button onClick={() => setCartOpen(true)} className="button">
        View Cart
      </Button>

      <Dialog
        open={cartOpen}
        onClose={() => setCartOpen(false)}
        backdrop={<div className="backdrop" />}
        className="dialog"
      >
        <div className="header">
          <DialogHeading className="heading">Your Shopping Cart</DialogHeading>
          <DialogDismiss className="button secondary dismiss" />
        </div>

        <table className="table">
          <tbody className="table-body">
            {products.map((product) => (
              <tr key={product}>
                <td className="table-cell">{product}</td>
                <td className="table-cell">
                  <Button
                    onClick={() => setRemoving(product)}
                    className="button danger"
                  >
                    Remove
                    <VisuallyHidden> {product}</VisuallyHidden>
                  </Button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>

        <DialogDismiss className="button primary">Checkout</DialogDismiss>
      </Dialog>

      <Dialog
        unmountOnHide
        open={!!removing}
        onClose={() => setRemoving("")}
        backdrop={<div className="backdrop" />}
        className="dialog"
      >
        <DialogHeading className="heading">Remove product</DialogHeading>
        <DialogDescription className="description">
          Are you sure you want to remove &quot;{removing}&quot; from your cart?
        </DialogDescription>
        <div className="buttons">
          <DialogDismiss onClick={confirmRemove} className="button danger">
            Remove
          </DialogDismiss>
          <DialogDismiss autoFocus className="button secondary">
            Cancel
          </DialogDismiss>
        </div>
      </Dialog>
    </>
  );
}

import {
  Button,
  Dialog,
  DialogDescription,
  DialogDismiss,
  DialogHeading,
  VisuallyHidden,
} from "@ariakit/react";
import { useState } from "react";
import "./style.css";

export default function Example() {
  const [cartOpen, setCartOpen] = useState(false);
  const [removing, setRemoving] = useState("");
  const [products, setProducts] = useState([
    "Summer T-Shirt",
    "Warm Jacket",
    "Slim Shorts",
  ]);

  const confirmRemove = () => {
    setProducts((products) => {
      return products.filter((product) => product !== removing);
    });
  };

  return (
    <>
      <Button onClick={() => setCartOpen(true)} className="button">
        View Cart
      </Button>

      <Dialog
        open={cartOpen}
        onClose={() => setCartOpen(false)}
        backdrop={<div className="backdrop" />}
        className="dialog"
      >
        <div className="header">
          <DialogHeading className="heading">Your Shopping Cart</DialogHeading>
          <DialogDismiss className="button secondary dismiss" />
        </div>

        <table className="table">
          <tbody className="table-body">
            {products.map((product) => (
              <tr key={product}>
                <td className="table-cell">{product}</td>
                <td className="table-cell">
                  <Button
                    onClick={() => setRemoving(product)}
                    className="button danger"
                  >
                    Remove
                    <VisuallyHidden> {product}</VisuallyHidden>
                  </Button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>

        <DialogDismiss className="button primary">Checkout</DialogDismiss>
      </Dialog>

      <Dialog
        unmountOnHide
        open={!!removing}
        onClose={() => setRemoving("")}
        backdrop={<div className="backdrop" />}
        className="dialog"
      >
        <DialogHeading className="heading">Remove product</DialogHeading>
        <DialogDescription className="description">
          Are you sure you want to remove &quot;{removing}&quot; from your cart?
        </DialogDescription>
        <div className="buttons">
          <DialogDismiss onClick={confirmRemove} className="button danger">
            Remove
          </DialogDismiss>
          <DialogDismiss autoFocus className="button secondary">
            Cancel
          </DialogDismiss>
        </div>
      </Dialog>
    </>
  );
}

Components

DialogOpen a new window that can be either modal or non-modal and optionally rendered in a React portal. This component is based on the WAI-ARIA Dialog Pattern.

ButtonTrigger an action or event, such as submitting a Form, opening a Dialog, canceling an action, or performing a delete operation in React. This component is based on the WAI-ARIA Button Pattern.

VisuallyHiddenHide an element visually but keep it available for screen readers and other assistive technologies.

View all components

Identifying nested dialogs

There are three ways Ariakit can identify nested dialogs:

They are nested in the React tree.

<Dialog>
  <Dialog />
</Dialog>
<Dialog>
  <Dialog />
</Dialog>

2
They are appended to the body element after the parent dialog is opened.
```
<Dialog />
<Dialog unmountOnHide />
<Dialog />
<Dialog unmountOnHide />
```

They are referenced in the getPersistentElements prop of the parent dialog.

<Dialog getPersistentElements={() => document.querySelectorAll(".dialog")} />
<Dialog className="dialog" />
<Dialog getPersistentElements={() => document.querySelectorAll(".dialog")} />
<Dialog className="dialog" />

In this example, we're using the second method. By passing the unmountOnHide prop to the nested dialog, it's rendered only when the dialog is open. This is the same strategy used by the Dialog module to support third-party dialogs and browser extensions that open popups, such as 1Password, Google Translate, and Grammarly.

This applies to all components that use Dialog under the hood, such as Combobox, Hovercard, Menu, Popover, Select, and Tooltip.