timolins / react-hot-toast

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

Dismiss for custom toast not working as intended. #361

Open longmauriceproj opened 5 months ago

longmauriceproj commented 5 months ago

Description

For custom toasts, dismissing a notification via toast.dismiss() doesn't register and close the toast immediately.

I've created a minimal repo that showcases this issue using the TailwindCSS custom toast example: https://github.com/longmauriceproj/custom-toast-dismiss-issue/tree/main

toast.custom((t) => (
    <div
      className={`${
        t.visible ? "animate-enter" : "animate-leave"
      } max-w-md w-full bg-white shadow-lg rounded-lg pointer-events-auto flex ring-1 ring-black ring-opacity-5`}
    >
      <div className="flex-1 w-0 p-4">
        <div className="flex items-start">
          <div className="flex-shrink-0 pt-0.5">
            <img
              className="h-10 w-10 rounded-full"
              src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixqx=6GHAjsWpt9&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.2&w=160&h=160&q=80"
              alt=""
            />
          </div>
          <div className="ml-3 flex-1">
            <p className="text-sm font-medium text-gray-900">Emilia Gates</p>
            <p className="mt-1 text-sm text-gray-500">
              Sure! 8:30pm works great!
            </p>
          </div>
        </div>
      </div>
      <div className="flex border-l border-gray-200">
        <button
          onClick={() => toast.dismiss(t.id)}
          className="w-full border border-transparent rounded-none rounded-r-lg p-4 flex items-center justify-center text-sm font-medium text-indigo-600 hover:text-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
        >
          Close
        </button>
      </div>
    </div>
  ));

Expected Behavior

When user clicks the dismiss button to close the toast, the toast is dismissed right away.

Actual Behavior

When user clicks the dismiss button to close the toast, there is a lag of a second or two before the toast is dismissesd.

ArunasuraFR commented 5 months ago

Hello,

Seem related to this issue #187.

Make sure if "animate-enter" and "animate-leave" is correctly defined.