Input autoFocus doesn't work when Modal opened from MenuItem via keyboard #8791
Description
Provide a general summary of the issue here
Hy there, I'm having an issue with Menu -> Modal focus management.
When I open a Modal from a MenuItem, the autoFocus prop on inputs inside the modal works fine if I click the menu item with my mouse, but doesn't work if I navigate the menu with keyboard and press Enter/Space.
// Menu item that opens modal
<MenuItem onAction={() => dispatch({type: 'open', modal: 'form'})}>
Open Form
</MenuItem>
// Inside the modal
<NumberInput autoFocus /> // Works with mouse, not keyboard
adding setTimeout(() => dispatch(...), 0) fixes it, but seems like this should not be necessary.
The autoFocus prop is definitely being applied to the input, it looks like its a timing issue ?between when the menu closes and the modal's focus management "kicks in".
🤔 Expected Behavior?
the inputs (input, numberfield) should receive focus, both on mouse and keyboard
😯 Current Behavior
when using the keyboard, the focus is not being received
💁 Possible Solution
No response
🔦 Context
No response
🖥️ Steps to Reproduce
import { useState } from 'react';
import {
Button,
Dialog,
Input,
Label,
Menu,
MenuItem,
MenuTrigger,
Modal,
ModalOverlay,
Popover,
TextField
} from 'react-aria-components';
function App() {
const [modalOpen, setModalOpen] = useState(false);
return (
<>
<MenuTrigger>
<Button>Actions</Button>
<Popover>
<Menu>
<MenuItem onAction={() => setModalOpen(true)}>
Open Form
</MenuItem>
</Menu>
</Popover>
</MenuTrigger>
{modalOpen && (
<ModalOverlay>
<Modal>
<Dialog>
<TextField autoFocus>
<Label>First name</Label>
<Input />
</TextField>
<Button onPress={() => setModalOpen(false)}>Close</Button>
</Dialog>
</Modal>
</ModalOverlay>
)}
</>
);
}
Version
1.11.0
What browsers are you seeing the problem on?
Firefox, Chrome
If other, please specify.
No response
What operating system are you using?
mac os sequoia 5.6.1 (24G90)
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response