Merge pull request #7113 from primefaces/7112-multiselect-focus-problem

Multiselect focus problem
primefaces · Sep 4, 2024 · 5840c12 · 5840c12
2 parents f398e9f + 8b703e6
commit 5840c12
Show file tree

Hide file tree

Showing 3 changed files with 2 additions and 23 deletions.
diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js
@@ -145,18 +145,6 @@ export const MultiSelect = React.memo(
             index !== -1 && setFocusedOptionIndex(index);
         };
 
-        const findNextItem = (item) => {
-            const nextItem = item.nextElementSibling;
-
-            return nextItem ? (DomHandler.getAttribute(nextItem, 'data-p-disabled') === true || DomHandler.getAttribute(nextItem, 'data-pc-section') === 'itemgroup' ? findNextItem(nextItem) : nextItem) : null;
-        };
-
-        const findPrevItem = (item) => {
-            const prevItem = item.previousElementSibling;
-
-            return prevItem ? (DomHandler.getAttribute(prevItem, 'data-p-disabled') === true || DomHandler.getAttribute(prevItem, 'data-pc-section') === 'itemgroup' ? findPrevItem(prevItem) : prevItem) : null;
-        };
-
         const onClick = (event) => {
             if (!props.inline && !props.disabled && !props.loading && !isPanelClicked(event) && !isClearClicked(event)) {
                 overlayVisibleState ? hide() : show();
@@ -449,6 +437,7 @@ export const MultiSelect = React.memo(
                         value
                     }
                 });
+                DomHandler.focus(inputRef.current);
             }
         };
 
@@ -730,10 +719,6 @@ export const MultiSelect = React.memo(
             return isValidOption(option) && isSelected(option);
         };
 
-        const checkValidity = () => {
-            return inputRef.current.checkValidity();
-        };
-
         const findSelectedOptionIndex = () => {
             if (hasSelectedOption()) {
                 for (let index = props.value.length - 1; index >= 0; index--) {

diff --git a/components/lib/multiselect/MultiSelectItem.js b/components/lib/multiselect/MultiSelectItem.js
@@ -53,7 +53,6 @@ export const MultiSelectItem = React.memo((props) => {
     const checkboxIcon = props.selected ? IconUtils.getJSXIcon(icon, { ...checkboxIconProps }, { selected: props.selected }) : null;
 
     const content = props.template ? ObjectUtils.getJSXElement(props.template, props.option) : props.label;
-    const tabIndex = props.disabled ? -1 : props.tabIndex;
 
     const checkboxContainerProps = mergeProps(
         {
@@ -70,7 +69,6 @@ export const MultiSelectItem = React.memo((props) => {
             onFocus: onFocus,
             onBlur: onBlur,
             onMouseMove: (e) => props?.onMouseMove(e, props.index),
-            tabIndex: tabIndex,
             role: 'option',
             'aria-selected': props.selected,
             'data-p-highlight': props.selected,
@@ -82,7 +80,7 @@ export const MultiSelectItem = React.memo((props) => {
     return (
         <li {...itemProps} key={props.index + '_multiselectitem'}>
             <div {...checkboxContainerProps}>
-                <Checkbox ref={checkboxRef} checked={props.selected} icon={checkboxIcon} pt={ptm('checkbox')} unstyled={isUnstyled()} />
+                <Checkbox ref={checkboxRef} checked={props.selected} icon={checkboxIcon} pt={ptm('checkbox')} unstyled={isUnstyled()} tabIndex={-1} />
             </div>
             <span>{content}</span>
             <Ripple />

diff --git a/components/lib/multiselect/MultiSelectPanel.js b/components/lib/multiselect/MultiSelectPanel.js
@@ -111,7 +111,6 @@ export const MultiSelectPanel = React.memo(
                 const optionLabel = props.getOptionLabel(option);
                 const optionKey = j + '_' + props.getOptionRenderKey(option);
                 const disabled = props.isOptionDisabled(option);
-                const tabIndex = disabled ? null : props.tabIndex || 0;
                 const selected = props.isSelected(option);
 
                 return (
@@ -127,7 +126,6 @@ export const MultiSelectPanel = React.memo(
                         selected={selected}
                         onClick={props.onOptionSelect}
                         onMouseMove={changeFocusedItemOnHover}
-                        tabIndex={tabIndex}
                         disabled={disabled}
                         className={props.itemClassName}
                         checkboxIcon={props.checkboxIcon}
@@ -201,7 +199,6 @@ export const MultiSelectPanel = React.memo(
             const optionLabel = props.getOptionLabel(option);
             const optionKey = index + '_' + props.getOptionRenderKey(option);
             const disabled = props.isOptionDisabled(option);
-            const tabIndex = disabled ? null : props.tabIndex || 0;
             const selected = props.isSelected(option);
 
             return (
@@ -217,7 +214,6 @@ export const MultiSelectPanel = React.memo(
                     selected={selected}
                     onClick={props.onOptionSelect}
                     onMouseMove={changeFocusedItemOnHover}
-                    tabIndex={tabIndex}
                     disabled={disabled}
                     className={props.itemClassName}
                     checkboxIcon={props.checkboxIcon}