adobe / adobe/react-spectrum

Dialog animation fails if element has autoFocus

Open
#6,012 1 comment 0 reactions 0 assignees View on GitHub
needs investigation
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.