fix(ComboBox): retain input value when menu is open and esc is pressed

carbon-design-system · Feb 17, 2023 · 00a61d2 · 00a61d2
1 parent ca262ed
commit 00a61d2
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/packages/react/src/components/ComboBox/ComboBox.tsx b/packages/react/src/components/ComboBox/ComboBox.tsx
@@ -480,6 +480,14 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
             if (match(event, keys.Enter) && !inputValue) {
               toggleMenu();
             }
+
+            if (match(event, keys.Escape) && inputValue) {
+              if (event.target === textInput.current && isOpen) {
+                toggleMenu();
+                event.preventDownshiftDefault = true;
+                event.persist();
+              }
+            }
           },
         });
 

diff --git a/packages/react/src/components/MultiSelect/FilterableMultiSelect.js b/packages/react/src/components/MultiSelect/FilterableMultiSelect.js
@@ -303,14 +303,11 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect(
                   if (match(event, keys.Delete) || match(event, keys.Escape)) {
                     if (isOpen) {
                       handleOnMenuChange(true);
+                      clearInputValue();
                       event.stopPropagation();
                     } else if (!isOpen) {
-                      clearInputValue();
+                      clearSelection();
                       event.stopPropagation();
-                      if (event.target.value === '') {
-                        clearSelection();
-                        event.stopPropagation();
-                      }
                     }
                   }
                 }