fix: enhance FocusScope to support tab completion for IMEs (#5909)

* fix: Improve tab completion for IMEs

Author: ryo-manba

packages/@react-aria/focus/src/FocusScope.tsx

@@ -314,7 +314,7 @@ function useFocusContainment(scopeRef: RefObject<Element[]>, contain?: boolean)
 
     // Handle the Tab key to contain focus within the scope
     let onKeyDown = (e) => {
-      if (e.key !== 'Tab' || e.altKey || e.ctrlKey || e.metaKey || !shouldContainFocus(scopeRef)) {
+      if (e.key !== 'Tab' || e.altKey || e.ctrlKey || e.metaKey || !shouldContainFocus(scopeRef) || e.isComposing) {
         return;
       }
 
@@ -585,7 +585,7 @@ function useRestoreFocus(scopeRef: RefObject<Element[]>, restoreFocus?: boolean,
     // using portals for overlays, so that focus goes to the expected element when
     // tabbing out of the overlay.
     let onKeyDown = (e: KeyboardEvent) => {
-      if (e.key !== 'Tab' || e.altKey || e.ctrlKey || e.metaKey || !shouldContainFocus(scopeRef)) {
+      if (e.key !== 'Tab' || e.altKey || e.ctrlKey || e.metaKey || !shouldContainFocus(scopeRef) || e.isComposing) {
         return;
       }
 

packages/@react-aria/focus/stories/FocusScope.stories.tsx

@@ -210,3 +210,67 @@ export const IgnoreRestoreFocus = {
 export const FocusableFirstInScope = {
   render: () => <FocusableFirstInScopeExample />
 };
+
+
+function FocusableInputFormExample(args) {
+  let [isOpen, setOpen] = React.useState(false);
+  let {contain, restoreFocus, autoFocus} = args;
+
+  return (
+    <>
+      <button onClick={() => setOpen(true)}>Open</button>
+      {isOpen && (
+        <>
+          <div style={{display: 'flex', flexDirection: 'column', marginBottom: '10px'}}>
+            <FocusScope contain={contain} restoreFocus={restoreFocus} autoFocus={autoFocus}>
+              <label htmlFor="first-input">First Input</label>
+              <input id="first-input" />
+              <label htmlFor="second-input">Second Input</label>
+              <input id="second-input" />
+            </FocusScope>
+          </div>
+          <div style={{display: 'flex', flexDirection: 'column'}}>
+            <label htmlFor="third-input">Third Input</label>
+            <input id="third-input" />
+          </div>
+          <button onClick={() => setOpen(false)}>Close</button>
+        </>
+      )}
+    </>
+  );
+}
+
+export const FocusableInputForm = {
+  name: 'FocusableInputForm',
+  render: (args) => <FocusableInputFormExample {...args} />,
+  args: {
+    contain: true,
+    restoreFocus: true,
+    autoFocus: true
+  },
+  argTypes: {
+    contain: {
+      control: 'boolean'
+    },
+    restoreFocus: {
+      control: 'boolean'
+    },
+    autoFocus: {
+      control: 'boolean'
+    }
+  },
+  parameters: {
+    description: {
+      data: `
+1. Open OS keyboard settings
+2. Add Chinese Pinyin - Simplified
+3. Go to the third input
+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
+`
+    }
+  }
+};