[Dialog] Various issues when combining with Framer Motion (forceMount related)

[swernerx]

Bug report

Current Behavior

Working with animation on libraries like Framer Motion the docs suggest to use the forceMount flag. The Dialog component seems to have a few issues with this:

• pointer-events: none is applied to both document.body and overlay when forceMount is enabled. This prevents any interaction with the actual application (even initially opening the dialog). It does not care about the actual value of the open property passed with the Root component.
• Setting modal=false on Root fixes these two pointer-event related issues but messes with the overlay component. It never mounts the overlay... never. Not even when forceMount is true.

Expected behavior

• pointer-event should only be applied when the dialog is open ... independent from the actual mount scenario relying on the open state/prop.
• modal: false should still mount the overlay when forceMount is true.

Reproducible example

CodeSandbox Demo

Suggested solution

I have not checked the code in detail but I guess with a small number of tweaks in the logic it should be done... Hopefully not breaking other expected behavior. I also would suggest to add a full blown working demo using an animation library like framer-motion to the docs.

Additional context

Your environment

Software	Name(s)	Version
Radix Package(s)	@radix-ui/react-dialog	1.0.3
React	n/a	18.2.0
Browser	Chrome	110
Assistive tech	-	-
Node	n/a	16.19.1
npm/yarn	pnpm	7.29.0
Operating System

[joaom00]

The correct usage would be https://codesandbox.io/s/quiet-monad-mjev2q?file=/src/App.tsx

[swernerx]

That does indeed look like a possible solution. No, a great one. After all, it runs without all the hacks I thought were necessary. Thank you very much! I had been working with AnimatePresence myself.... but my attempts were always inside the portal, as I assumed this was more just a logical helper than a real component that would only be there to determine that mount target of the two children Overlay and Content. However, there were problems regarding a possible missing forward ref on AnimatePresence.

Either way. I think it would be helpful if this solution was documented somewhere. It has not been obvious to me that it is necessary not to render the whole portal at all when the Dialog is not open. I assumed that the Dialog component itself passes on the "open" state via some internal state handling - for example, via Context. But this is apparently not the case.

A possible addition to the documentation:

If "forceMount" is used, you are completely responsible for managing the open state yourself. In this case, you also have to make sure that the portal is only rendered when it is open. Otherwise, this will directly block any possible user interaction on the body during rendering. For framer motion you can use AnimatePresence for example and render the portal directly conditional on the value of the own open-state.

[andy-hook]

@swernerx Do you think a set of demos / examples showing how to animate various primitives with Framer be useful? I don't think the docs make this super clear either but I'm also thinking a "show, don't tell" approach could solve a lot of this.

[SpicyPete]

So... were those examples ever made?