fix: handle empty itemKeys for sub-menus

Author: raheeliftikhar5

client/packages/lowcoder/src/comps/comps/layout/layoutMenuItemComp.tsx

@@ -100,10 +100,14 @@ export class LayoutMenuItemListComp extends list(LayoutMenuItemCompMigrate) {
     const data = this.getView();
     this.dispatch(
       this.pushAction(
-        value || {
-          label: trans("menuItem") + " " + (data.length + 1),
-          itemKey: genRandomKey(),
-        }
+        value
+          ? {
+            ...value,
+            itemKey: value.itemKey || genRandomKey(),
+          } : {
+            label: trans("menuItem") + " " + (data.length + 1),
+            itemKey: genRandomKey(),
+          }
       )
     );
   }

client/packages/lowcoder/src/comps/comps/navComp/components/DroppableMenuItem.tsx

@@ -1,10 +1,12 @@
 import { useDraggable, useDroppable } from "@dnd-kit/core";
 import { trans } from "i18n";
-import { Fragment } from "react";
+import { Fragment, useEffect } from "react";
 import styled from "styled-components";
 import DroppablePlaceholder from "./DroppablePlaceHolder";
 import MenuItem, { ICommonItemProps } from "./MenuItem";
 import { IDragData, IDropData } from "./types";
+import { LayoutMenuItemComp } from "comps/comps/layout/layoutMenuItemComp";
+import { genRandomKey } from "comps/utils/idGenerator";
 
 const DraggableMenuItemWrapper = styled.div`
   position: relative;
@@ -63,6 +65,22 @@ export default function DraggableMenuItem(props: IDraggableMenuItemProps) {
     disabled: isDragging || disabled || disableDropIn,
     data: dropData,
   });
+
+  // TODO: Remove this later.
+  // Set ItemKey for previously added sub-menus
+  useEffect(() => {
+    if(!items.length) return;
+    if(!(items[0] instanceof LayoutMenuItemComp)) return;
+
+    return items.forEach(item  => {
+      const subItem = item as LayoutMenuItemComp;
+      const itemKey = subItem.children.itemKey.getView();
+      if(itemKey === '') {
+        subItem.children.itemKey.dispatchChangeValueAction(genRandomKey())
+      }
+    })
+  }, [items])
+
   return (
     <>
       <DraggableMenuItemWrapper>