UnderlineNav2: Only allow Enter and Space to select item (#2553)

* Only allow space and enter to select item * code review comments
primer · Nov 10, 2022 · 3a4b312 · 3a4b312
1 parent 7877f89
commit 3a4b312
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/.changeset/big-goats-deliver.md b/.changeset/big-goats-deliver.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+UnderlineNav2: Only allow `Enter` and `Space` key to select an UnderlineNav item
diff --git a/src/UnderlineNav2/UnderlineNavItem.tsx b/src/UnderlineNav2/UnderlineNavItem.tsx
@@ -123,11 +123,11 @@ export const UnderlineNavItem = forwardRef(
 
     const keyPressHandler = React.useCallback(
       event => {
-        if (!event.defaultPrevented && [' ', 'Enter'].includes(event.key)) {
-          if (typeof onSelect === 'function') onSelect(event)
-          if (typeof afterSelect === 'function') afterSelect(event)
+        if (event.key === ' ' || event.key === 'Enter') {
+          if (!event.defaultPrevented && typeof onSelect === 'function') onSelect(event)
+          if (!event.defaultPrevented && typeof afterSelect === 'function') afterSelect(event)
+          setSelectedLink(ref as RefObject<HTMLElement>)
         }
-        setSelectedLink(ref as RefObject<HTMLElement>)
       },
       [onSelect, afterSelect, ref, setSelectedLink]
     )