diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js
index 1410a90588..067ce70928 100644
--- a/components/lib/multiselect/MultiSelect.js
+++ b/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 (
<>
@@ -1092,7 +1065,7 @@ export const MultiSelect = React.memo(
{triggerIcon}
>
)}
-
+
-
{hasTooltip && }
>
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 (
+
{header}
{content}
{footer}
+
);
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;
item: MenuItem;
@@ -156,6 +164,11 @@ export interface PanelMenuProps extends Omit {
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;
diff --git a/components/lib/tristatecheckbox/TriStateCheckbox.js b/components/lib/tristatecheckbox/TriStateCheckbox.js
index cc8ab532ff..b4abbdb6d4 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,