fix: enhance FocusScope to support tab completion for IMEs
Closes https://github.com/adobe/react-spectrum/issues/5904
I've tested with several languages, but found that not many languages present completion with the Tab key. Therefore, I have confirmed the behavior only with "Chinese Pinyin - Simplified", "Japanese - Kana", and Google IME - Japanese.
โ 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).
- [ ] Looked at the Accessibility Practices for this feature - Aria Practices
๐ Test Instructions:
Setup for MacOS:
- Open OS keyboard settings.
- Add "Chinese Pinyin - Simplified", "Japanese - Kana", and Google IME - Japanese.
Testing Steps:
- Navigate to the MDN input search example.
- In the second input field, type "a" to trigger a set of suggestions.
- Press the Tab key three times to cycle through different suggestions.
- Now, visit the FocusScope Storybook example.
- Repeat steps 2 and 3 in the Storybook example's input field.
- Confirm that the behavior in the MDN example and the Storybook example is consistent, particularly in how suggestions are cycled through with the Tab key.
๐งข Your Project:
GET_BUILD
Build successful! ๐
GET_BUILD
Build successful! ๐
## API Changes
unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any', access: 'private' } unknown top level export { type: 'any', access: 'private' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'identifier', name: 'Column' } unknown top level export { type: 'identifier', name: 'Column' } unknown type { type: 'link' } unknown type { type: 'link' } unknown type { type: 'link' } unknown type { type: 'link' } unknown type { type: 'link' } unknown type { type: 'link' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' }
Sorry, can you include the correction to #5921?
@rktyt This PR doesn't directly relate to that issue, so I'm planning to submit another PR for it. Thanks for the comment! EDIT: I've opened a PR here: https://github.com/adobe/react-spectrum/pull/5923