From d2ae24ccacc7b86e43046fcf675b1ed757db988a Mon Sep 17 00:00:00 2001 From: Armagan Ersoz Date: Tue, 8 Nov 2022 13:57:08 +1000 Subject: [PATCH 1/2] Only allow space and enter to select item --- .changeset/big-goats-deliver.md | 5 +++++ src/UnderlineNav2/UnderlineNavItem.tsx | 8 ++++---- 2 files changed, 9 insertions(+), 4 deletions(-) create mode 100644 .changeset/big-goats-deliver.md diff --git a/.changeset/big-goats-deliver.md b/.changeset/big-goats-deliver.md new file mode 100644 index 00000000000..36d74f2276e --- /dev/null +++ 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 index be89953c72a..507a5182575 100644 --- a/src/UnderlineNav2/UnderlineNavItem.tsx +++ b/src/UnderlineNav2/UnderlineNavItem.tsx @@ -121,11 +121,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 ([' ', 'Enter'].includes(event.key)) { + if (!event.defaultPrevented && typeof onSelect === 'function') onSelect(event) + if (!event.defaultPrevented && typeof afterSelect === 'function') afterSelect(event) + setSelectedLink(ref as RefObject) } - setSelectedLink(ref as RefObject) }, [onSelect, afterSelect, ref, setSelectedLink] ) From ce590a366ec8ea912bb2015afca833a040c34abe Mon Sep 17 00:00:00 2001 From: Armagan Ersoz Date: Thu, 10 Nov 2022 12:00:08 +1000 Subject: [PATCH 2/2] code review comments --- src/UnderlineNav2/UnderlineNavItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/UnderlineNav2/UnderlineNavItem.tsx b/src/UnderlineNav2/UnderlineNavItem.tsx index 7a855f884f4..6f6d91454e1 100644 --- a/src/UnderlineNav2/UnderlineNavItem.tsx +++ b/src/UnderlineNav2/UnderlineNavItem.tsx @@ -123,7 +123,7 @@ export const UnderlineNavItem = forwardRef( const keyPressHandler = React.useCallback( event => { - if ([' ', 'Enter'].includes(event.key)) { + 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)