diff --git a/packages/@adobe/react-spectrum/src/toast/ToastContainer.tsx b/packages/@adobe/react-spectrum/src/toast/ToastContainer.tsx index bfe312bfcba..3de2e15ae21 100644 --- a/packages/@adobe/react-spectrum/src/toast/ToastContainer.tsx +++ b/packages/@adobe/react-spectrum/src/toast/ToastContainer.tsx @@ -41,11 +41,14 @@ export type CloseFunction = () => void; function wrapInViewTransition(fn: () => void): void { if ('startViewTransition' in document) { - document - .startViewTransition(() => { - flushSync(fn); - }) - .ready.catch(() => {}); + let transition = document.startViewTransition(() => { + flushSync(fn); + }); + // Prevents unhandled promise rejections when a transition is + // preempted by another (e.g. overlapping toasts). + transition.finished.catch(() => {}); + transition.ready.catch(() => {}); + transition.updateCallbackDone.catch(() => {}); } else { fn(); } diff --git a/starters/docs/src/Toast.tsx b/starters/docs/src/Toast.tsx index ee4b4c7d390..069b8862fba 100644 --- a/starters/docs/src/Toast.tsx +++ b/starters/docs/src/Toast.tsx @@ -25,9 +25,14 @@ export const queue = new ToastQueue({ // Wrap state updates in a CSS view transition. wrapUpdate(fn) { if ('startViewTransition' in document) { - document.startViewTransition(() => { + let transition = document.startViewTransition(() => { flushSync(fn); }); + // Prevents unhandled promise rejections when a transition is + // preempted by another (e.g. overlapping toasts). + transition.finished.catch(() => {}); + transition.ready.catch(() => {}); + transition.updateCallbackDone.catch(() => {}); } else { fn(); } diff --git a/starters/tailwind/src/Toast.tsx b/starters/tailwind/src/Toast.tsx index 38d70b74cf3..eb0f23fd132 100644 --- a/starters/tailwind/src/Toast.tsx +++ b/starters/tailwind/src/Toast.tsx @@ -26,9 +26,14 @@ export const queue = new ToastQueue({ // Wrap state updates in a CSS view transition. wrapUpdate(fn) { if ('startViewTransition' in document) { - document.startViewTransition(() => { + let transition = document.startViewTransition(() => { flushSync(fn); }); + // Prevents unhandled promise rejections when a transition is + // preempted by another (e.g. overlapping toasts). + transition.finished.catch(() => {}); + transition.ready.catch(() => {}); + transition.updateCallbackDone.catch(() => {}); } else { fn(); }