feat #218 - Remove MultipleChoice Tab key press

dassana-io · Feb 17, 2021 · 4659d6e · 4659d6e
1 parent 060869c
commit 4659d6e
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 34 deletions.
diff --git a/src/__snapshots__/storybook.test.ts.snap b/src/__snapshots__/storybook.test.ts.snap
@@ -959,7 +959,7 @@ exports[`Storyshots MultipleChoice Multiple 1`] = `
   <p
     className="info-0-1-62 info-d2-0-1-65"
   >
-    Press Tab or Up, Down, Left, Right arrow keys to navigate. Press enter or alphabet keys to select/deselect.
+    Press Up, Down, Left, Right arrow keys to navigate. Press enter or alphabet keys to select/deselect.
   </p>
   <div
     className="eventTarget-0-1-60 eventTarget-d0-0-1-63"
@@ -1216,7 +1216,7 @@ exports[`Storyshots MultipleChoice Single 1`] = `
   <p
     className="info-0-1-62 info-d5-0-1-85"
   >
-    Press Tab or Up, Down, Left, Right arrow keys to navigate. Press enter or alphabet keys to select/deselect.
+    Press Up, Down, Left, Right arrow keys to navigate. Press enter or alphabet keys to select/deselect.
   </p>
   <div
     className="eventTarget-0-1-60 eventTarget-d3-0-1-83"
@@ -1452,7 +1452,7 @@ exports[`Storyshots MultipleChoice Single Column 1`] = `
   <p
     className="info-0-1-62 info-d8-0-1-98"
   >
-    Press Tab or Up, Down, Left, Right arrow keys to navigate. Press enter or alphabet keys to select/deselect.
+    Press Up, Down, Left, Right arrow keys to navigate. Press enter or alphabet keys to select/deselect.
   </p>
   <div
     className="eventTarget-0-1-60 eventTarget-d6-0-1-96"

diff --git a/src/components/MultipleChoice/BaseMultipleChoice.tsx b/src/components/MultipleChoice/BaseMultipleChoice.tsx
@@ -38,7 +38,6 @@ export const BaseMultipleChoice: FC<BaseMultipleChoiceProps> = ({
 	const componentClasses = useStyles({ items, singleColumnItemsCount })
 
 	const [currentFocus, setCurrentFocus] = useState(-1)
-	const [isShiftPressed, setIsShiftPressed] = useState(false)
 
 	// https://dev.to/rafi993/roving-focus-in-react-with-custom-hooks-1ln
 	useEffect(() => {
@@ -47,12 +46,6 @@ export const BaseMultipleChoice: FC<BaseMultipleChoiceProps> = ({
 			e.stopPropagation()
 		}
 
-		// onKeyUp to keep track of Shift key being unpressed
-		const onKeyUp = (e: KeyboardEvent) => {
-			if (e.key === 'Shift') setIsShiftPressed(false)
-			preventDefault(e)
-		}
-
 		// onKeyDown will check which key is pressed and conditionally select/deselect item or give focus to item
 		const onKeyDown = (e: KeyboardEvent) => {
 			const index = e.key.toUpperCase().charCodeAt(0) - 65
@@ -64,31 +57,16 @@ export const BaseMultipleChoice: FC<BaseMultipleChoiceProps> = ({
 				onSelectedChange(items[index].value)
 			}
 
-			// Keep track of Shift key being pressed
-			if (e.key === 'Shift') {
-				preventDefault(e)
-
-				setIsShiftPressed(true)
-			}
-
 			// For keys - ArrowRight, ArrowDown and Tab (without Shift) move focus to next item
-			if (
-				e.key === 'ArrowRight' ||
-				e.key === 'ArrowDown' ||
-				(e.key === 'Tab' && !isShiftPressed)
-			) {
+			if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
 				preventDefault(e)
 
 				setCurrentFocus(
 					currentFocus === items.length - 1 ? 0 : currentFocus + 1
 				)
 
 				// For keys - ArrowLeft, ArrowUp and Tab (with Shift) move focus to previous item
-			} else if (
-				e.key === 'ArrowLeft' ||
-				e.key === 'ArrowUp' ||
-				(e.key === 'Tab' && isShiftPressed)
-			) {
+			} else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
 				preventDefault(e)
 
 				setCurrentFocus(
@@ -104,22 +82,18 @@ export const BaseMultipleChoice: FC<BaseMultipleChoiceProps> = ({
 			const target = eventTargetRef.current
 
 			target.addEventListener('keydown', onKeyDown)
-			target.addEventListener('keyup', onKeyUp)
 
 			return () => {
 				target.removeEventListener('keydown', onKeyDown)
-				target.removeEventListener('keyup', onKeyUp)
 			}
 		} else {
 			window.addEventListener('keydown', onKeyDown)
-			window.addEventListener('keyup', onKeyUp)
 
 			return () => {
 				window.removeEventListener('keydown', onKeyDown)
-				window.removeEventListener('keyup', onKeyUp)
 			}
 		}
-	}, [currentFocus, getEventTarget, isShiftPressed, items, onSelectedChange])
+	}, [currentFocus, getEventTarget, items, onSelectedChange])
 
 	if (items.length > 26)
 		throw new Error(

diff --git a/src/components/MultipleChoice/MultipleChoice.stories.tsx b/src/components/MultipleChoice/MultipleChoice.stories.tsx
@@ -62,8 +62,8 @@ const ThemedMultipleChoice: FC<MultipleChoiceProps> = (
 				Click on the bordered box to use keyboard shortcuts
 			</h3>
 			<p className={classes.info}>
-				Press Tab or Up, Down, Left, Right arrow keys to navigate. Press
-				enter or alphabet keys to select/deselect.
+				Press Up, Down, Left, Right arrow keys to navigate. Press enter
+				or alphabet keys to select/deselect.
 			</p>
 			<div className={classes.eventTarget} ref={divRef} tabIndex={0}>
 				<MultipleChoice