Dialog animation fails if element has autoFocus
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
### 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`](https://github.com/jamiebuilds/tailwindcss-animate) plugin:
```tsx
import { ModalOverlay, Modal, Dialog, DialogTrigger, Button } from 'react-aria-components'
const Test = () => {
return (
Open modal
</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_
Contributor guide
Assessment
This issue has not been assessed yet.