Unable to animate AnimatedDialogContent's "translateY" in with "overflow: hidden"

🐛 Bug report

Current Behavior

When using @reach/dialog with react-spring, the AnimatedDialogContent component — created with animated(DialogContent) — is unable correctly animate from translateY(100%) to translateY(0%) with overflow: hidden set on the AnimatedDialogOverlay. Instead, the AnimatedDialogContent appears at it’s end position (translateY(0%)) and has some odd jank going on.

https://user-images.githubusercontent.com/19195374/107703683-9e754a80-6c81-11eb-9e99-e5b5757f57b1.mp4

Expected behavior

I expected the AnimatedDialogContent to slide up from the bottom of the screen. I created an example of this without @reach/dialog to demonstrate what it should look like:

https://user-images.githubusercontent.com/19195374/107704003-2eb38f80-6c82-11eb-8f02-b106df354734.mp4

Reproducible example

CodeSandbox for Reach UI’s Dialog reproduction

CodeSandbox for working example without Reach UI’s Dialog

Suggested solution(s)

I have no clue why this happens and I couldn’t find any information by looking at the source code for the Dialog components.

Your environment

Software	Name(s)	Version
Reach Package	@reach/dialog	0.13.0
React	react, react-dom	17.0.1
Browser	Chrome Beta, Chrome, Firefox	89.0.4389.40, 88.0.4324.150, 86.0b8
Operating System	Windows

[indiesquidge]

@ChrisBrownie55 thanks for the further explanation. My initial comments were less about including Reach’s default styles as the solution and more about some of the custom styling as the problem, but I overlooked the exactness of the your expected behavior, my mistake.

This appears to be a consequence of react-focus-lock’s FocusLock’s autoFocus prop. (Here is a fork of your sandbox working example without Reach’s Dialog showing the issue.) FocusLock is used within Dialog with a few props hardcoded, but you can get around this by passing true for the DialogOverlay’s dangerouslyBypassFocusLock. If you do this, it is recommended that you then supply your own focus trap to keep the tab sequence locked within the modal contents. It would be worth digging into that library to figure out which options suit your needs best while still keeping your implementation as accessible as possible.

[andria-dev]

I do feel like this information should be added to the animation section of the documentation though as it is not at all evident in any manner that I was supposed to do this.