From cb12647607598ad1d6765ed4d4e6c02bf21b50e5 Mon Sep 17 00:00:00 2001 From: ANTONA09 Date: Sat, 2 Nov 2024 21:13:09 +0530 Subject: [PATCH] fix: #7349, MultiSelect: Unable to select remove icon of chips through keyboard --- components/lib/multiselect/MultiSelect.js | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js index 79c461d7f3..3e95127e17 100644 --- a/components/lib/multiselect/MultiSelect.js +++ b/components/lib/multiselect/MultiSelect.js @@ -858,6 +858,23 @@ export const MultiSelect = React.memo( return ObjectUtils.getJSXElement(props.selectedItemTemplate); } + const onremoveTokenIconKeyDown = (event, val) => { + event.preventDefault(); + event.stopPropagation(); + + switch (event.code) { + case 'Space': + case 'NumpadEnter': + case 'Enter': + if (props.inline) { + break; + } + + removeChip(event, val); + break; + } + }; + if (props.display === 'chip' && !empty) { const value = props.value.slice(0, props.maxSelectedLabels || props.value.length); @@ -873,7 +890,10 @@ export const MultiSelect = React.memo( const iconProps = mergeProps( { className: cx('removeTokenIcon'), - onClick: (e) => removeChip(e, val) + onClick: (e) => removeChip(e, val), + tabIndex: props.tabIndex || '0', + 'aria-label': localeOption('removeTokenIcon'), + onKeyDown: (e) => onremoveTokenIconKeyDown(e, val) }, ptm('removeTokenIcon', context) );