From 556c9a7155c9f1fc7856bca9e3b9d59d3142c927 Mon Sep 17 00:00:00 2001
From: melloware <mellowaredev@gmail.com>
Date: Tue, 6 Aug 2024 16:54:14 -0400
Subject: [PATCH] Fix #6997: MenuBar re-render on props.model changes

---
 components/lib/menubar/Menubar.js    | 7 ++++---
 components/lib/menubar/MenubarSub.js | 3 +--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/lib/menubar/Menubar.js b/components/lib/menubar/Menubar.js
index 0750070183..2133807752 100644
--- a/components/lib/menubar/Menubar.js
+++ b/components/lib/menubar/Menubar.js
@@ -491,7 +491,7 @@ export const Menubar = React.memo(
             }
         };
 
-        const createProcessedItems = React.useCallback((items, level = 0, parent = {}, parentKey = '') => {
+        const createProcessedItems = (items, level = 0, parent = {}, parentKey = '') => {
             const _processedItems = [];
 
             items &&
@@ -511,7 +511,7 @@ export const Menubar = React.memo(
                 });
 
             return _processedItems;
-        }, []);
+        };
 
         useMountEffect(() => {
             if (!idState) {
@@ -536,7 +536,8 @@ export const Menubar = React.memo(
             const processed = createProcessedItems(itemsToProcess, 0, null, '');
 
             setProcessedItems(processed);
-        }, [props.model, createProcessedItems]);
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [props.model]);
 
         useUpdateEffect(() => {
             const processedItem = activeItemPath.find((p) => p.key === focusedItemInfo.parentKey);
diff --git a/components/lib/menubar/MenubarSub.js b/components/lib/menubar/MenubarSub.js
index c9b0da6a86..76b37a5e81 100644
--- a/components/lib/menubar/MenubarSub.js
+++ b/components/lib/menubar/MenubarSub.js
@@ -239,7 +239,6 @@ export const MenubarSub = React.memo(
             const menuitemProps = mergeProps(
                 {
                     id,
-                    key: dataId,
                     'data-id': dataId,
                     role: 'menuitem',
                     'aria-label': item.label,
@@ -259,7 +258,7 @@ export const MenubarSub = React.memo(
             );
 
             return (
-                <li {...menuitemProps}>
+                <li {...menuitemProps} key={dataId}>
                     <div {...contentProps}>{content}</div>
                     {submenu}
                 </li>