[Toast] Re-ordering DOM is making JS animation difficult

[jjenzz]

Bug report

I'm trying to use framer-motion to animate the layout of toasts as they enter/leave but framer-motion is struggling to keep track of the elements. My guess is that by re-ordering the DOM in the MutationObserver, Radix is disconnecting the DOM from the React tree which causes issues for libs relying on the React tree (e.g. key prop).

Here is an example of the animation I am trying to achieve: https://codesandbox.io/s/framer-motion-2-animating-shared-layouts-forked-w4ezvn?file=/src/App.js. Notice how previously opened toasts transition upwards as new toasts are added.

Here is what happens with Radix Toast: https://codesandbox.io/s/framer-motion-2-animating-shared-layouts-forked-n81u8m?file=/src/App.js. Previously opened toasts snap upwards when new toasts are added.

Suggested solution

I'm thinking the MutationObserver probably isn't a good idea (regardless of my particular issue) because it is messing with render order outside of React-land.

Instead, perhaps toast could manually manage focus to fix the tab order issue that this MutationObserver was solving? If focus enters the region, it could focus the last li first, and hijack tab keypress to move backwards through the items (similar to focus scope and NavigationMenu solutions).

[benoitgrelard]

@jjenzz just so I know what we are talking about, I'm familiar with how we hijack tab keypress in FocusScope but what is the thing you mention about NavigationMenu?

Maybe @andy-hook can chip in too.

[andy-hook]

In NavigationMenu we detect edges and route focus by manually controlling it within the content and moving it to a proxy element when required. The Proxy then determines the entrance / exit direction by the origin.

Just so I'm understanding the original issue solved by MutationObserver, is the problem that we need to be able to tab through toast items from most recent the least?

[jjenzz]

Just so I'm understanding the original issue, is the problem that we need to be able to tab through toast items from most recent the least?

Most recent should be tabbed to first and unfortunately, most recent will be at the bottom of the viewport DOM.

[jjenzz]

Would there be any objection to me removing this MutationObserver for now?

Tab order wouldn't be right but not the end of the world for now since most people are unlikely to enter the region, and if they do there will most likely be only one toast or multiples of the same toast. A separate PR can be raised to solve tab order later?

An example showing animation working without MutationObserver: https://codesandbox.io/s/immutable-snow-i21885?file=/src/App.tsx

[benoitgrelard]

Similar to #1211