Dismiss for custom toast not working as intended.
longmauriceproj opened this issue · comments
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.
