Fix #5929 - Multi-select / Dropdown will not lose focus

components/lib/multiselect/MultiSelect.js

@@ -1028,7 +1028,8 @@ export const MultiSelect = React.memo(
 
         const hiddenInputWrapperProps = mergeProps(
             {
-                className: 'p-hidden-accessible'
+                className: 'p-hidden-accessible',
+                'data-p-hidden-accessible': true
             },
             ptm('hiddenInputWrapper')
         );
@@ -1051,34 +1052,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}>
@@ -1092,7 +1065,7 @@ export const MultiSelect = React.memo(
                             {triggerIcon}
                         </>
                     )}
-                    <span {...firstHiddenElementProps}></span>
+
                     <MultiSelectPanel
                         hostName="MultiSelect"
                         ref={overlayRef}
@@ -1102,6 +1075,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}
@@ -1130,7 +1107,6 @@ export const MultiSelect = React.memo(
                         isUnstyled={isUnstyled}
                         metaData={metaData}
                     />
-                    <span {...lastHiddenElementProps}></span>
                 </div>
                 {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} pt={ptm('tooltip')} {...props.tooltipOptions} />}
             </>

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>
             );

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

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 || index !== focusedIndex ? '-1' : '0';
                     const selected = isSelected(option);
                     const key = optionLabel + '_' + index;
 

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,