Japanese input in `FocusScope`

[rktyt]

Provide a general summary of the issue here

If a text input element exists in FocusScope, the tab key cannot be used to select conversion candidates for Japanese input.

The image below is Google IME.

🤔 Expected Behavior?

Conversion candidates can be selected using the tab key.

😯 Current Behavior

Unable to select conversion candidates using tab key.

💁 Possible Solution

Add check for KeyboardEvent.isComposing. https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/isComposing

https://github.com/adobe/react-spectrum/blob/%40react-aria/focus%403.16.1/packages/%40react-aria/focus/src/FocusScope.tsx#L316-L320

Example:

if (e.key !== 'Tab' || e.altKey || e.ctrlKey || e.metaKey || !shouldContainFocus(scopeRef) || e.isComposing) {
  return;
}

🔦 Context

No response

🖥️ Steps to Reproduce

<FocusScope autoFocus contain>
  <form>
    <input type="search" />
    <button type="submit">Submit</button>
  </form>
</FocusScope>

Version

[email protected]

What browsers are you seeing the problem on?

Chrome, Safari, Microsoft Edge

If other, please specify.

No response

What operating system are you using?

MacOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

Thanks for reporting this! Your suggested fix looks reasonable, would you be willing to open a PR?

Is Google IME -> https://www.google.com/inputtools/chrome/ ?

[rktyt]

I'm sorry, I don't have much time, so I'll ask someone else to do the PR.

The Google IME I use is https://www.google.co.jp/ime/

Note: The same problem occurs with MacOS standard Japanese input method.

[snowystinger]

Thanks, I was able to reproduce it. https://stackblitz.com/edit/vitejs-vite-fhf8rd?file=package.json,src%2FApp.tsx&terminal=dev

Steps to reproduce for those less familiar with different ime's, and because I'm not so familiar with the Japanese one and was having some issues. Steps are probably the same and I just don't know enough to get multiple suggestions.

If on MacOS

1. Open OS keyboard settings
2. Add Chinese Pinyin - Simplified
3. Go to the second input displayed in the stackblitz
4. Type "ni", a set of suggestions should appear
5. Press Tab 3x and see how it shows different suggestions
6. Go to the first input
7. Repeat steps 4&5
8. See how it leaves the suggestions and jumps to the form button