diff --git a/packages/react/src/components/ListBox/ListBoxSelection.tsx b/packages/react/src/components/ListBox/ListBoxSelection.tsx index f79b51f0b9f1..e88a88cbdc5a 100644 --- 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 index 63a722649328..12c1cb1276b7 100644 --- 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 (
@@ -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"> @@ -94,8 +77,7 @@ function ListBoxSelection({ className={className} disabled={disabled} onClick={onClick} - onKeyDown={onKeyDown} - tabIndex={disabled ? -1 : 0} + tabIndex={-1} title={description} type="button"> diff --git a/packages/react/src/components/MultiSelect/FilterableMultiSelect.js b/packages/react/src/components/MultiSelect/FilterableMultiSelect.js index cb12365dad1b..203e8e359b04 100644 --- 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); }