Dialog animation fails if element has autoFocus

[andrecasal]

Provide a general summary of the issue here

Dialog animation fails if element has autoFocus.

🤔 Expected Behavior?

Expected animation to work.

😯 Current Behavior

Animation is janky.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

1. Take the following code, with the tailwind-animate plugin:

import { ModalOverlay, Modal, Dialog, DialogTrigger, Button } from 'react-aria-components'

const Test = () => {
	return (
		<DialogTrigger>
			<Button>Open modal</Button>
			<ModalOverlay className="fixed inset-0 flex items-center justify-end overflow-hidden bg-black/25 backdrop-blur duration-300 ease-out animate-in fade-in">
				<Modal className="w-96 bg-white duration-300 ease-out animate-in slide-in-from-right">
					<Dialog>
						<textarea className="border" autoFocus />
					</Dialog>
				</Modal>
			</ModalOverlay>
		</DialogTrigger>
	)
}

export default Test

2. Notice how the dialog doesn't animate properly.
3. Notice how removing autoFocus from the <textarea /> makes the animation work again.

Notes:
While having <textarea autoFocus /> animating from the left or top works, but animating from right or bottom doesn't.

Version

1.0.1

What browsers are you seeing the problem on?

Firefox, Chrome

If other, please specify.

No response

What operating system are you using?

macOS Sonoma 14.3.1

🧢 Your Company/Team

https://verveui.pro/components/modals/dialog

🕷 Tracking Issue

No response