[RovingFocusGroup] Move only with single arrow keys (radix-ui#2739)

Fixes radix-ui#2732
implydata · Feb 28, 2024 · 1fbb93c · 1fbb93c
1 parent f243570
commit 1fbb93c
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/.yarn/versions/f4333956.yml b/.yarn/versions/f4333956.yml
@@ -0,0 +1,13 @@
+releases:
+  "@radix-ui/react-context-menu": patch
+  "@radix-ui/react-dropdown-menu": patch
+  "@radix-ui/react-menu": patch
+  "@radix-ui/react-menubar": patch
+  "@radix-ui/react-radio-group": patch
+  "@radix-ui/react-roving-focus": patch
+  "@radix-ui/react-tabs": patch
+  "@radix-ui/react-toggle-group": patch
+  "@radix-ui/react-toolbar": patch
+
+declined:
+  - primitives
diff --git a/packages/react/roving-focus/src/RovingFocusGroup.tsx b/packages/react/roving-focus/src/RovingFocusGroup.tsx
@@ -261,6 +261,7 @@ const RovingFocusGroupItem = React.forwardRef<RovingFocusItemElement, RovingFocu
             const focusIntent = getFocusIntent(event, context.orientation, context.dir);
 
             if (focusIntent !== undefined) {
+              if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return;
               event.preventDefault();
               const items = getItems().filter((item) => item.focusable);
               let candidateNodes = items.map((item) => item.ref.current!);