fix(select): disable keydown event propogation

w0wka91 · Jun 15, 2019 · a3f54f7 · a3f54f7
1 parent f059acf
commit a3f54f7
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 47 deletions.
diff --git a/src/components/select/Select.test.tsx b/src/components/select/Select.test.tsx
@@ -77,3 +77,18 @@ it('should delete the current value on escape', async () => {
   fireEvent.keyDown(getByLabelText('Superheroes'), { keyCode: 27 })
   expect(getByLabelText('Superheroes')).toHaveValue('')
 })
+
+it('should not propogate the keydown event', async () => {
+  const func = jest.fn()
+  const { getByLabelText, container } = render(
+    <Select
+      label="Superheroes"
+      value="Iron Man"
+      options={options}
+      onChange={func}
+    />
+  )
+  container.addEventListener('keydown', func, false)
+  fireEvent.keyDown(getByLabelText('Superheroes'), { keyCode: 27 })
+  expect(func).toBeCalledTimes(0)
+})
diff --git a/src/components/select/Select.tsx b/src/components/select/Select.tsx
@@ -111,6 +111,60 @@ function Select({
   const filteredOptions = options.filter(o =>
     o.label.toLocaleLowerCase().includes(state.inputValue.toLocaleLowerCase())
   )
+  useEffect(() => {
+    const handleKeyDown = (evt: KeyboardEvent) => {
+      evt.stopPropagation()
+      switch (evt.keyCode) {
+        case 40:
+          dispatch({
+            type: 'highlight-option',
+            index:
+              state.collapsed ||
+              filteredOptions.length - 1 === state.highlightedOption
+                ? 0
+                : state.highlightedOption + 1,
+          })
+          break
+        case 38:
+          dispatch({
+            type: 'highlight-option',
+            index:
+              state.highlightedOption === 0
+                ? filteredOptions.length - 1
+                : state.highlightedOption - 1,
+          })
+          break
+        case 27:
+          if (!state.collapsed) {
+            dispatch({
+              type: 'collapse',
+            })
+          } else {
+            dispatch({
+              type: 'value-change',
+              inputValue: '',
+            })
+          }
+          break
+        case 13:
+          if (!state.collapsed) {
+            dispatch({
+              type: 'selection-change',
+              inputValue: filteredOptions[state.highlightedOption].label,
+              selectedKey: filteredOptions[state.highlightedOption].value,
+            })
+          }
+          break
+      }
+    }
+    if (inputRef.current)
+      inputRef.current.addEventListener('keydown', handleKeyDown, false)
+    return () => {
+      if (inputRef.current) {
+        inputRef.current.removeEventListener('keydown', handleKeyDown, false)
+      }
+    }
+  }, [state.highlightedOption, state.collapsed])
   useEffect(() => {
     if (!state.collapsed && inputRef.current && state.focused)
       inputRef.current.focus()
@@ -121,7 +175,6 @@ function Select({
       inputRef.current.focus()
     }
   }, [state.selectedKey])
-
   return (
     <div
       className={css`
@@ -165,52 +218,6 @@ function Select({
             `}
             id={`input-${id}`}
             ref={inputRef}
-            onKeyDown={evt => {
-              switch (evt.keyCode) {
-                case 40:
-                  dispatch({
-                    type: 'highlight-option',
-                    index:
-                      state.collapsed ||
-                      filteredOptions.length - 1 === state.highlightedOption
-                        ? 0
-                        : state.highlightedOption + 1,
-                  })
-                  break
-                case 38:
-                  dispatch({
-                    type: 'highlight-option',
-                    index:
-                      state.highlightedOption === 0
-                        ? filteredOptions.length - 1
-                        : state.highlightedOption - 1,
-                  })
-                  break
-                case 27:
-                  if (!state.collapsed) {
-                    dispatch({
-                      type: 'collapse',
-                    })
-                  } else {
-                    dispatch({
-                      type: 'value-change',
-                      inputValue: '',
-                    })
-                  }
-                  break
-                case 13:
-                  if (!state.collapsed) {
-                    dispatch({
-                      type: 'selection-change',
-                      inputValue:
-                        filteredOptions[state.highlightedOption].label,
-                      selectedKey:
-                        filteredOptions[state.highlightedOption].value,
-                    })
-                  }
-                  break
-              }
-            }}
             onFocus={evt => {
               dispatch({ type: 'focus' })
               if (onFocus) onFocus(evt)