Are "dismiss" options on Dialog really working?

[stas-kh]

I'm trying to configure my Dialogs to not close automatically when clicked outside. I found that there is a dismiss option on the Dialog component, but passing falsy options to its events like referencePointerDown or outsidePointerDown doesn't give me desired results.

Example:

<Dialog
  open={open}
  handler={handleOpen}
  dismiss={{
    enabled: true,
    escapeKey: true,
    referencePointerDown: false,
    outsidePointerDown: false,
    ancestorScroll: false,
    bubbles: false,
  }}
>

Can you help me to understand what should be passed there to close the dialog only when "Escape" button is pressed?

[sajadevo]

Hey @stas-kh,

It's because of some major changes to floating-ui library here is a quick fix for you and I'll fix this issue on the upcoming update.

import { Fragment, useState } from "react";
import {
  Button,
  Dialog,
  DialogHeader,
  DialogBody,
  DialogFooter,
} from "@material-tailwind/react";

export default function Example() {
  const [open, setOpen] = useState(false);

  const handleOpen = () => setOpen(!open);

  return (
    <Fragment>
      <Button onClick={handleOpen} variant="gradient">
        Open Dialog
      </Button>
      <Dialog
        open={open}
        handler={handleOpen}
        dismiss={{
          outsidePress: false,
        } as any}
      >
        <DialogHeader>Its a simple dialog.</DialogHeader>
        <DialogBody divider>
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusamus ad
          reprehenderit omnis perspiciatis aut odit! Unde architecto
          perspiciatis, dolorum dolorem iure quia saepe autem accusamus eum
          praesentium magni corrupti explicabo!
        </DialogBody>
        <DialogFooter>
          <Button
            variant="text"
            color="red"
            onClick={handleOpen}
            className="mr-1"
          >
            <span>Cancel</span>
          </Button>
          <Button variant="gradient" color="green" onClick={handleOpen}>
            <span>Confirm</span>
          </Button>
        </DialogFooter>
      </Dialog>
    </Fragment>
  );
}

Cheers, Sajad

[ggquicky]

Hello, @sajadevo. Is Dismiss still not working? Cause I tried with the Menu component, but it isn't responding to the properties.

[sajadevo]

Hey there,

It's working if you use the following pattern:

interface Props {
  enabled?: boolean;
  escapeKey?: boolean;
  referencePress?: boolean;
  referencePressEvent?: 'pointerdown' | 'mousedown' | 'click';
  outsidePress?: boolean | ((event: MouseEvent) => boolean);
  outsidePressEvent?: 'pointerdown' | 'mousedown' | 'click';
  ancestorScroll?: boolean;
  bubbles?:
    | boolean
    | {escapeKey?: boolean; outsidePress?: boolean};
}

Regards, Sajad

[ggquicky]

Hello again @sajadevo the props are working but I have a warning on react console:

Warning: Failed prop type: The prop dismiss.isRequired is marked as required in MaterialTailwind.MenuCore, but its value is undefined.

<Menu
            ref={ref as React.Ref<HTMLButtonElement>}
            placement="right-start"
            dismiss={{
              enabled: true,
              escapeKey: false,
              referencePress: true,
              referencePressEvent: "click",
              outsidePress: true,
              outsidePressEvent: "click",
              ancestorScroll: true,
              bubbles: {
                escapeKey: true,
                outsidePress: false,
              },
            }}
          >

[ryanchua00]

Hi, i'm facing a similar issue using a dismiss prop in a menu element.

For "@material-tailwind/react": "^2.0.6"

[SrOliver202023]

I also, when i use menu and set dissmiss as dismiss={{ itemPress: true }} it starts throwing the error : app-index.js:31 Warning: Failed prop type: The prop dismiss.isRequired is marked as required in MaterialTailwind.Menu, but its value is undefined

[denislutz]

Same warning here, any update on this?

import React, { PropsWithChildren } from 'react';
import { Menu, MenuList, MenuHandler } from '@material-tailwind/react';

export const FilterDropDown: React.FC<
  PropsWithChildren<{
    root?: React.ReactNode;
  }>
> = ({ children, root }) => {
  return (
    <div data-testid="filterDropDownTrigger">
      <Menu placement="bottom" dismiss={{ outsidePress: true }}>
        <MenuHandler >
          <div>{root}</div>
        </MenuHandler>
        <MenuList>{children}</MenuList>
      </Menu>
    </div>
  );
};

export default FilterDropDown;

Warning in console

Warning: Failed prop type: The prop `dismiss.isRequired` is marked as required in `MaterialTailwind.MenuCore`, but its value is `undefined`.
node_modules/@material-tailwind/react/components/Menu/MenuCore.js/MenuCore<@http://localhost:4200/....

[seminip]

dismiss={{ outsidePress: false }} works for me to stop the Dialog from closing when clicking the backdrop.
Using     "@material-tailwind/react": "^2.1.7"