react-spectrum
react-spectrum copied to clipboard
Fix autofocusing for long-lived dialog components
Closes #2397
โ Pull Request Checklist:
- [x] Included link to corresponding React Spectrum GitHub Issue.
- [x] Added/updated unit tests and storybook for this change (for new code or code which already has tests).
- [x] Filled out test instructions.
- [ ] Updated documentation (if it already exists for this component).
- [x] Looked at the Accessibility Practices for this feature - Aria Practices
๐ Test Instructions:
The scenario for should focus the overlay on open will fail without this change. For proof, revert
https://github.com/adobe/react-spectrum/blob/6b36d162a6634978740d0f60118c9fb6804850cf/packages/@react-aria/dialog/src/useDialog.ts#L54
and run
$ yarn test packages/@react-aria/dialog
๐งข Your Project:
N/A
I took a look at the regression caused by this, and I'm doubting that the iOS workaround actually does what it's intended - it seems totally at odds with shouldCloseOnBlur. The failing test basically asserts that the tray should close immediately after it's opened!
https://github.com/adobe/react-spectrum/blob/a169a3c827fe07e1e94ff8f7539dd2bbb6874414/packages/@react-spectrum/overlays/test/Tray.test.js#L101-L109
This section of the test seems to be saying "after waiting for the tray to open, it should automatically close due to the iOS workaround". I have a real component implementation resembling ControlledExample, and when I enable shouldCloseOnBlur without defining an autofocusable element, my dialog does indeed close half a second after I open it.
Is the workaround actually necessary? I can't see how ref.current can exist without the component having been rendered. Additionally, focusSafely already has a competing timer created by runAfterTransition, and the delay it waits to move focus should be long enough for the VoiceOver cursor to discover the dialog.
Thanks for opening an issue and suggesting a fix ๐๐ป , we'll have to check on all the versions we support to make sure this isn't needed anymore.
Closing for same reason https://github.com/adobe/react-spectrum/issues/2397#issuecomment-1613951081