fix(useCombobox): prevent default on Escape when open or has content (#…

…1407)
downshift-js · Sep 14, 2022 · 3eb7b44 · 3eb7b44
1 parent 1054249
commit 3eb7b44
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 3 deletions.
diff --git a/src/hooks/useCombobox/__tests__/getInputProps.test.js b/src/hooks/useCombobox/__tests__/getInputProps.test.js
@@ -170,7 +170,7 @@ describe('getInputProps', () => {
         result.current.toggleMenu()
       })
       act(() => {
-        onKeyDown({key: 'Escape', preventDefault: noop})
+        onKeyDown({key: 'Escape', preventDefault: noop, stopPropagation: noop})
       })
 
       expect(userOnKeyDown).toHaveBeenCalledTimes(1)
@@ -228,7 +228,7 @@ describe('getInputProps', () => {
 
         inputRef({focus: noop})
         result.current.toggleMenu()
-        onBlur({key: 'Escape', preventDefault: noop})
+        onBlur({preventDefault: noop})
       })
 
       expect(userOnBlur).toHaveBeenCalledTimes(1)
@@ -771,6 +771,25 @@ describe('getInputProps', () => {
         expect(renderSpy).toHaveBeenCalledTimes(1) // re-render on key
       })
 
+      test('escape stops propagation when it closes the menu or clears the input', () => {
+        const {input} = renderCombobox({
+          initialIsOpen: true,
+          initialSelectedItem: items[0],
+        })
+        const keyDownEvents = [
+          createEvent.keyDown(input, {key: 'Escape'}),
+          createEvent.keyDown(input, {key: 'Escape'}),
+          createEvent.keyDown(input, {key: 'Escape'}),
+        ]
+
+        for (let index = 0; index < keyDownEvents.length; index++) {
+          fireEvent(input, keyDownEvents[index])
+          expect(keyDownEvents[index].defaultPrevented).toBe(
+            index !== keyDownEvents.length - 1,
+          )
+        }
+      })
+
       test('enter it closes the menu and selects highlighted item', () => {
         const initialHighlightedIndex = 2
         const {keyDownOnInput, input, getItems} = renderCombobox({

diff --git a/src/hooks/useCombobox/index.js b/src/hooks/useCombobox/index.js
@@ -190,14 +190,16 @@ function useCombobox(userProps = {}) {
           getItemNodeFromIndex,
         })
       },
-      Escape() {
+      Escape(event) {
         const latestState = latest.current.state
         if (
           latestState.isOpen ||
           latestState.inputValue ||
           latestState.selectedItem ||
           latestState.highlightedIndex > -1
         ) {
+          event.preventDefault()
+
           dispatch({
             type: stateChangeTypes.InputKeyDownEscape,
           })