diff --git a/packages/react/src/components/MultiSelect/MultiSelect.tsx b/packages/react/src/components/MultiSelect/MultiSelect.tsx index ded2a65ff5ba..db5d76f96a5f 100644 --- a/packages/react/src/components/MultiSelect/MultiSelect.tsx +++ b/packages/react/src/components/MultiSelect/MultiSelect.tsx @@ -89,6 +89,10 @@ interface SortItemsOptions selectedItems: ItemType[]; } +interface selectedItemType { + text: string; +} + interface MultiSelectSortingProps { /** * Provide a compare function that is used to determine the ordering of @@ -133,6 +137,11 @@ export interface MultiSelectProps > { className?: string; + /** + * Specify the text that should be read for screen readers that describes that all items are deleted + */ + clearAnnouncement?: string; + /** * Specify the text that should be read for screen readers that describes total items selected */ @@ -320,6 +329,7 @@ const MultiSelect = React.forwardRef( sortItems = defaultSortItems as MultiSelectProps['sortItems'], compareItems = defaultCompareItems, clearSelectionText = 'To clear selection, press Delete or Backspace', + clearAnnouncement = 'all items have been cleared', clearSelectionDescription = 'Total items selected: ', light, invalid, @@ -349,6 +359,7 @@ const MultiSelect = React.forwardRef( const [isOpen, setIsOpen] = useState(open || false); const [prevOpenProp, setPrevOpenProp] = useState(open); const [topItems, setTopItems] = useState([]); + const [itemsCleared, setItemsCleared] = useState(false); const { selectedItems: controlledSelectedItems, onItemChange, @@ -405,12 +416,17 @@ const MultiSelect = React.forwardRef( e.stopPropagation(); } + if (!isOpen && match(e, keys.Delete) && selectedItems.length > 0) { + setItemsCleared(true); + } + if ( (match(e, keys.Space) || match(e, keys.ArrowDown) || match(e, keys.Enter)) && !isOpen ) { + setItemsCleared(false); setIsOpenWrapper(true); } } @@ -588,14 +604,18 @@ const MultiSelect = React.forwardRef( }); } + const itemsSelectedText = + selectedItems.length > 0 && + selectedItems.map((item) => (item as selectedItemType).text); + return (
@@ -701,6 +721,9 @@ const MultiSelect = React.forwardRef( } )} + {itemsCleared && ( + + )} {!inline && !invalid && !warn && helperText && (