search

timolins / react-hot-toast

Smoking Hot React Notifications 🔥
https://react-hot-toast.com
MIT License
9.47k stars 310 forks source link

Dismiss click passes event through and causes Modal to close incorrectly #233

Open uicowboy opened 1 year ago

uicowboy commented 1 year ago

ISSUE When a Modal is rendered using HeadlessUI React, and a toast is dismissed manually by clicking on the X button, it causes the modal to close as well.

DEMO Codesandbox: https://codesandbox.io/s/react-hot-toast-headlessui-modal-2c9t27?file=/src/Modal.js

STEPS TO REPRODUCE

  1. Click "Open Modal" button
  2. Click button to trigger toast
  3. Click X button on toast to dismiss it
  4. Both toast AND modal will close. The onClose handler on the Modal is being called, and this seems like a bug

EXPECTED BEHAVIOR Only the toast should close, NOT the modal.

Using React 17 and the latest version of react-hot-toast.

May or may not be related to #164

diegohaz commented 1 year ago

I created this example of an accessible modal dialog that works with libraries like react-hot-toast using Ariakit:

https://ariakit.org/examples/dialog-react-toastify