From 8b703e6d0000a8ace3466b88d495c2623b19e52e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toprak=20Ko=C3=A7?= <hello@toprak.dev>
Date: Wed, 4 Sep 2024 14:48:09 +0300
Subject: [PATCH] Fixed focus problem

---
 components/lib/multiselect/MultiSelect.js      | 17 +----------------
 components/lib/multiselect/MultiSelectItem.js  |  4 +---
 components/lib/multiselect/MultiSelectPanel.js |  4 ----
 3 files changed, 2 insertions(+), 23 deletions(-)

diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js
index 9965f14513..8f984f29e7 100644
--- 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
index 3ba8ce9865..cad891356e 100644
--- 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
index ae23ddf9fd..bc63264ca8 100644
--- 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}