fix: primefaces#7349, MultiSelect: Unable to select remove icon of ch…

…ips through keyboard
qburst · Nov 2, 2024 · cb12647 · cb12647
1 parent ba98e88
commit cb12647
Showing 1 changed file with 21 additions and 1 deletion.
diff --git 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)
                     );