From 3a9d3c500f13ea652847cbf4ab448e265920477b Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Fri, 9 Feb 2024 16:01:24 +0300
Subject: [PATCH 1/4] Fix #5929 - Multi-select / Dropdown will not lose focus

---
 components/lib/multiselect/MultiSelect.js     | 38 ++++---------------
 .../lib/multiselect/MultiSelectPanel.js       | 30 +++++++++++++++
 2 files changed, 37 insertions(+), 31 deletions(-)

diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js
index 5582c33456..38bdee9552 100644
--- a/components/lib/multiselect/MultiSelect.js
+++ b/components/lib/multiselect/MultiSelect.js
@@ -1022,7 +1022,8 @@ export const MultiSelect = React.memo(
 
         const hiddenInputWrapperProps = mergeProps(
             {
-                className: 'p-hidden-accessible'
+                className: 'p-hidden-accessible',
+                'data-p-hidden-accessible': true
             },
             ptm('hiddenInputWrapper')
         );
@@ -1045,34 +1046,6 @@ export const MultiSelect = React.memo(
             ptm('input')
         );
 
-        const firstHiddenElementProps = mergeProps(
-            {
-                ref: firstHiddenFocusableElementOnOverlay,
-                role: 'presentation',
-                'aria-hidden': true,
-                className: 'p-hidden-accessible p-hidden-focusable',
-                tabIndex: '0',
-                onFocus: onFirstHiddenFocus,
-                'data-p-hidden-accessible': true,
-                'data-p-hidden-focusable': true
-            },
-            ptm('hiddenFirstFocusableEl')
-        );
-
-        const lastHiddenElementProps = mergeProps(
-            {
-                ref: lastHiddenFocusableElementOnOverlay,
-                role: 'presentation',
-                'aria-hidden': true,
-                className: 'p-hidden-accessible p-hidden-focusable',
-                tabIndex: '0',
-                onFocus: onLastHiddenFocus,
-                'data-p-hidden-accessible': true,
-                'data-p-hidden-focusable': true
-            },
-            ptm('hiddenLastFocusableEl')
-        );
-
         return (
             <>
                 <div {...rootProps}>
@@ -1086,7 +1059,7 @@ export const MultiSelect = React.memo(
                             {triggerIcon}
                         </>
                     )}
-                    <span {...firstHiddenElementProps}></span>
+
                     <MultiSelectPanel
                         hostName="MultiSelect"
                         ref={overlayRef}
@@ -1096,6 +1069,10 @@ export const MultiSelect = React.memo(
                         onOverlayHide={hide}
                         filterValue={filterState}
                         focusedOptionIndex={focusedOptionIndex}
+                        onFirstHiddenFocus={onFirstHiddenFocus}
+                        onLastHiddenFocus={onLastHiddenFocus}
+                        firstHiddenFocusableElementOnOverlay={firstHiddenFocusableElementOnOverlay}
+                        lastHiddenFocusableElementOnOverlay={lastHiddenFocusableElementOnOverlay}
                         setFocusedOptionIndex={setFocusedOptionIndex}
                         hasFilter={hasFilter}
                         onFilterInputChange={onFilterInputChange}
@@ -1124,7 +1101,6 @@ export const MultiSelect = React.memo(
                         isUnstyled={isUnstyled}
                         metaData={metaData}
                     />
-                    <span {...lastHiddenElementProps}></span>
                 </div>
                 {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} {...props.tooltipOptions} pt={ptm('tooltip')} />}
             </>
diff --git a/components/lib/multiselect/MultiSelectPanel.js b/components/lib/multiselect/MultiSelectPanel.js
index 588362a156..9dd06a4e2e 100644
--- a/components/lib/multiselect/MultiSelectPanel.js
+++ b/components/lib/multiselect/MultiSelectPanel.js
@@ -310,12 +310,42 @@ export const MultiSelectPanel = React.memo(
                 getPTOptions('transition')
             );
 
+            const firstHiddenElementProps = mergeProps(
+                {
+                    ref: props.firstHiddenFocusableElementOnOverlay,
+                    role: 'presentation',
+                    'aria-hidden': 'true',
+                    className: 'p-hidden-accessible p-hidden-focusable',
+                    tabIndex: '0',
+                    onFocus: props.onFirstHiddenFocus,
+                    'data-p-hidden-accessible': true,
+                    'data-p-hidden-focusable': true
+                },
+                ptm('hiddenFirstFocusableEl')
+            );
+
+            const lastHiddenElementProps = mergeProps(
+                {
+                    ref: props.lastHiddenFocusableElementOnOverlay,
+                    role: 'presentation',
+                    'aria-hidden': 'true',
+                    className: 'p-hidden-accessible p-hidden-focusable',
+                    tabIndex: '0',
+                    onFocus: props.onLastHiddenFocus,
+                    'data-p-hidden-accessible': true,
+                    'data-p-hidden-focusable': true
+                },
+                ptm('hiddenLastFocusableEl')
+            );
+
             return (
                 <CSSTransition nodeRef={ref} {...transitionProps}>
                     <div ref={ref} {...panelProps}>
+                        <span {...firstHiddenElementProps}></span>
                         {header}
                         {content}
                         {footer}
+                        <span {...lastHiddenElementProps}></span>
                     </div>
                 </CSSTransition>
             );

From b1b6ba0e9c372626c60c4ae37e2b0804a14c45e0 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Mon, 12 Feb 2024 14:12:31 +0300
Subject: [PATCH 2/4] Disabled elements are still focusable - SeelctButton |
 TristateCheckbox

---
 components/lib/selectbutton/SelectButton.js         | 2 +-
 components/lib/tristatecheckbox/TriStateCheckbox.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/lib/selectbutton/SelectButton.js b/components/lib/selectbutton/SelectButton.js
index d422ed3390..d445c48f97 100644
--- a/components/lib/selectbutton/SelectButton.js
+++ b/components/lib/selectbutton/SelectButton.js
@@ -96,7 +96,7 @@ export const SelectButton = React.memo(
                 return props.options.map((option, index) => {
                     const isDisabled = props.disabled || isOptionDisabled(option);
                     const optionLabel = getOptionLabel(option);
-                    const tabIndex = index === focusedIndex ? '0' : '-1';
+                    const tabIndex = props.disabled ? '-1' : index === focusedIndex ? '0' : '-1';
                     const selected = isSelected(option);
                     const key = optionLabel + '_' + index;
 
diff --git a/components/lib/tristatecheckbox/TriStateCheckbox.js b/components/lib/tristatecheckbox/TriStateCheckbox.js
index daddaacb69..d98fa56138 100644
--- a/components/lib/tristatecheckbox/TriStateCheckbox.js
+++ b/components/lib/tristatecheckbox/TriStateCheckbox.js
@@ -117,7 +117,7 @@ export const TriStateCheckbox = React.memo(
         const checkboxProps = mergeProps(
             {
                 className: cx('checkbox', { focusedState }),
-                tabIndex: props.tabIndex,
+                tabIndex: props.disabled ? '-1' : props.tabIndex,
                 onFocus: onFocus,
                 onBlur: onBlur,
                 onKeyDown: onKeyDown,

From 5c465e04c14ce754ea8c86901aa5d0ee9fbbeac1 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Mon, 12 Feb 2024 14:39:27 +0300
Subject: [PATCH 3/4] Add expandedKeys for panelmenu.d.ts

---
 components/lib/panelmenu/panelmenu.d.ts | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/components/lib/panelmenu/panelmenu.d.ts b/components/lib/panelmenu/panelmenu.d.ts
index 5e7948735f..0a3c173c66 100644
--- a/components/lib/panelmenu/panelmenu.d.ts
+++ b/components/lib/panelmenu/panelmenu.d.ts
@@ -142,6 +142,14 @@ export interface PanelMenuContext {
     active: boolean;
 }
 
+/**
+ * Custom expanded keys metadata.
+ * @see {@link PanelMenuProps.expandedKeys}
+ */
+export interface PanelMenuExpandedKeys {
+    [key: string]: any;
+}
+
 interface PanelMenuHeaderItemClickEvent {
     originalEvent: React.MouseEvent<HTMLElement>;
     item: MenuItem;
@@ -156,6 +164,11 @@ export interface PanelMenuProps extends Omit<React.DetailedHTMLProps<React.HTMLA
      * An array of menuitems.
      */
     model?: MenuItem[] | undefined;
+    /**
+     * A map of keys to represent the expansion state in controlled mode.
+     * @type {PanelMenuExpandedKeys}
+     */
+    expandedKeys?: PanelMenuExpandedKeys;
     /**
      * Whether multiple tabs can be activated at the same time or not.
      * @defaultValue false
@@ -179,6 +192,11 @@ export interface PanelMenuProps extends Omit<React.DetailedHTMLProps<React.HTMLA
      * @param {PanelMenuHeaderItemClickEvent} event - custom event.
      */
     onHide?(event: PanelMenuHeaderItemClickEvent): void;
+    /**
+     * Callback to when the expandedKeys changes.
+     * @param {*} value - New value.
+     */
+    onExpandedKeysChange?(value: any): void;
     /**
      * Used to get the child elements of the component.
      * @readonly

From 9b39df572a39cc478ff979a35a97349012d55c23 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Tue, 13 Feb 2024 15:53:58 +0300
Subject: [PATCH 4/4] Refactor SelectButton

---
 components/lib/selectbutton/SelectButton.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/lib/selectbutton/SelectButton.js b/components/lib/selectbutton/SelectButton.js
index 91a2a9b5b0..211e34ea15 100644
--- a/components/lib/selectbutton/SelectButton.js
+++ b/components/lib/selectbutton/SelectButton.js
@@ -96,7 +96,7 @@ export const SelectButton = React.memo(
                 return props.options.map((option, index) => {
                     const isDisabled = props.disabled || isOptionDisabled(option);
                     const optionLabel = getOptionLabel(option);
-                    const tabIndex = props.disabled ? '-1' : index === focusedIndex ? '0' : '-1';
+                    const tabIndex = props.disabled || index !== focusedIndex ? '-1' : '0';
                     const selected = isSelected(option);
                     const key = optionLabel + '_' + index;