fix: #7377, MultiSelect: Cannot access the close Icon and clear the i…

…nput using keyboard in Filled mode (#7378) * fix: #7377, MultiSelect: Cannot access the close Icon and clear the input using keyboard in Filled mode * fix: #7377, MultiSelect: Cannot access the close Icon and clear the input using keyboard in Filled mode --------- Co-authored-by: ANTONA09 <[email protected]>
primefaces · Nov 1, 2024 · aefd6a8 · aefd6a8
1 parent 6c1913f
commit aefd6a8
Showing 1 changed file with 21 additions and 1 deletion.
diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js
@@ -981,11 +981,31 @@ export const MultiSelect = React.memo(
             ZIndexUtils.clear(overlayRef.current);
         });
 
+        const onClearIconKeyDown = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+
+            switch (event.code) {
+                case 'Space':
+                case 'NumpadEnter':
+                case 'Enter':
+                    if (props.inline) {
+                        break;
+                    }
+
+                    updateModel(event, [], []);
+                    break;
+            }
+        };
+
         const createClearIcon = () => {
             const clearIconProps = mergeProps(
                 {
                     className: cx('clearIcon'),
-                    onClick: (e) => updateModel(e, [], [])
+                    onClick: (e) => updateModel(e, [], []),
+                    tabIndex: props.tabIndex || '0',
+                    'aria-label': localeOption('clear'),
+                    onKeyDown: (e) => onClearIconKeyDown(e)
                 },
                 ptm('clearIcon')
             );