Fix: 5930 add id to menubar top level prevents focus (#5933)

* Added empty message into tree * Fix: Added TS Support to Doc Highlights * Revert "Fix: Added TS Support to Doc Highlights" This reverts commit 653a959. * Fix: Added ID support with data-id changes * Update components/lib/menubar/MenubarSub.js Co-authored-by: Melloware <[email protected]> --------- Co-authored-by: Melloware <[email protected]>
primefaces · Feb 13, 2024 · 13e0879 · 13e0879
1 parent 9f983fa
commit 13e0879
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 11 deletions.
diff --git a/components/lib/menubar/Menubar.js b/components/lib/menubar/Menubar.js
@@ -356,7 +356,7 @@ export const Menubar = React.memo(
 
         const onEnterKey = (event) => {
             if (focusedItemInfo.index !== -1) {
-                const element = DomHandler.findSingle(rootMenuRef.current, `li[id="${`${focusedItemId}`}"]`);
+                const element = DomHandler.findSingle(rootMenuRef.current, `li[data-id="${`${focusedItemId}`}"]`);
                 const anchorElement = element && DomHandler.findSingle(element, 'a[data-pc-section="action"]');
 
                 anchorElement ? anchorElement.click() : element && element.click();
@@ -483,7 +483,7 @@ export const Menubar = React.memo(
 
         const scrollInView = (index = -1) => {
             const id = index !== -1 ? `${idState}_${index}` : focusedItemId;
-            const element = DomHandler.findSingle(rootMenuRef.current, `li[id="${id}"]`);
+            const element = DomHandler.findSingle(rootMenuRef.current, `li[data-id="${id}"]`);
 
             if (element) {
                 element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' });

diff --git a/components/lib/menubar/MenubarSub.js b/components/lib/menubar/MenubarSub.js
@@ -63,10 +63,10 @@ export const MenubarSub = React.memo(
         };
 
         const getItemId = (processedItem) => {
-            if (processedItem.item && processedItem.item.id) {
-                return processedItem.item.id;
-            }
+            return processedItem.item?.id;
+        };
 
+        const getItemDataId = (processedItem) => {
             return `${props.id}_${processedItem.key}`;
         };
 
@@ -87,7 +87,7 @@ export const MenubarSub = React.memo(
         };
 
         const isItemFocused = (processedItem) => {
-            return props.focusedItemId === getItemId(processedItem);
+            return props.focusedItemId === getItemDataId(processedItem);
         };
 
         const isItemGroup = (processedItem) => {
@@ -106,8 +106,8 @@ export const MenubarSub = React.memo(
             const key = props.id + '_separator_' + index;
             const separatorProps = mergeProps(
                 {
-                    id: key,
                     key,
+                    'data-id': key,
                     className: cx('separator'),
                     role: 'separator'
                 },
@@ -150,7 +150,8 @@ export const MenubarSub = React.memo(
                 return null;
             }
 
-            const key = getItemId(processedItem);
+            const id = getItemId(processedItem);
+            const dataId = getItemDataId(processedItem);
             const active = isItemActive(processedItem);
             const focused = isItemFocused(processedItem);
             const disabled = isItemDisabled(processedItem) || false;
@@ -236,8 +237,9 @@ export const MenubarSub = React.memo(
 
             const menuitemProps = mergeProps(
                 {
-                    id: key,
-                    key,
+                    id,
+                    key: id,
+                    'data-id': dataId,
                     role: 'menuitem',
                     'aria-label': item.label,
                     'aria-disabled': disabled,
@@ -283,7 +285,7 @@ export const MenubarSub = React.memo(
                 onFocus: props.onFocus,
                 onBlur: props.onBlur,
                 onKeyDown: props.onKeyDown,
-                id: props.id,
+                'data-id': props.id,
                 tabIndex: tabIndex,
                 'aria-activedescendant': props.ariaActivedescendant,
                 style: props.style,