fix(FilterableMultiselect): remove clear, tag from tab order

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

Hide file tree

Showing 3 changed files with 18 additions and 21 deletions.
diff --git a/packages/react/src/components/ListBox/ListBoxSelection.tsx b/packages/react/src/components/ListBox/ListBoxSelection.tsx
@@ -9,7 +9,6 @@ import cx from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Close } from '@carbon/icons-react';
-import { match, keys } from '../../internal/keyboard';
 import { usePrefix } from '../../internal/usePrefix';
 import { KeyboardEvent, MouseEvent } from 'react';
 

diff --git a/packages/react/src/components/ListBox/next/ListBoxSelection.js b/packages/react/src/components/ListBox/next/ListBoxSelection.js
@@ -9,7 +9,6 @@ import cx from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Close } from '@carbon/icons-react';
-import { match, keys } from '../../../internal/keyboard';
 import { usePrefix } from '../../../internal/usePrefix';
 
 /**
@@ -51,21 +50,6 @@ function ListBoxSelection({
     }
   }
 
-  function onKeyDown(event) {
-    event.stopPropagation();
-    if (disabled) {
-      return;
-    }
-
-    // When a user hits ENTER, we'll clear the selection
-    if (match(event, keys.Enter)) {
-      clearSelection(event);
-      if (onClearSelection) {
-        onClearSelection(event);
-      }
-    }
-  }
-
   if (selectionCount) {
     return (
       <div className={tagClasses}>
@@ -77,8 +61,7 @@ function ListBoxSelection({
           className={`${prefix}--tag__close-icon`}
           disabled={disabled}
           onClick={onClick}
-          onKeyDown={onKeyDown}
-          tabIndex={disabled ? -1 : 0}
+          tabIndex={-1}
           title={description}
           type="button">
           <Close />
@@ -94,8 +77,7 @@ function ListBoxSelection({
       className={className}
       disabled={disabled}
       onClick={onClick}
-      onKeyDown={onKeyDown}
-      tabIndex={disabled ? -1 : 0}
+      tabIndex={-1}
       title={description}
       type="button">
       <Close />

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