From a8c72fc5e7cbbb65d14f9d95582467e06bc6d6c6 Mon Sep 17 00:00:00 2001
From: Carl Chen <71313168+cc-hearts@users.noreply.github.com>
Date: Fri, 19 Apr 2024 19:18:30 +0800
Subject: [PATCH] fix[Menu]: fix `menu-item-group` not rendering in SSR (#7349)

* docs: updating the `dropdownRender` description and jumps in the FAQ for Select

* fix: `menu-item-group` rendered in ssr
---
 components/menu/src/Menu.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/components/menu/src/Menu.tsx b/components/menu/src/Menu.tsx
index b4eee426e..9c5956a0c 100644
--- a/components/menu/src/Menu.tsx
+++ b/components/menu/src/Menu.tsx
@@ -439,15 +439,17 @@ export default defineComponent({
       forceSubMenuRender: computed(() => props.forceSubMenuRender),
       rootClassName: hashId,
     });
+
+    const getChildrenList = () => itemsNodes.value || flattenChildren(slots.default?.());
     return () => {
-      const childList = itemsNodes.value || flattenChildren(slots.default?.());
+      const childList = getChildrenList();
       const allVisible =
         lastVisibleIndex.value >= childList.length - 1 ||
         mergedMode.value !== 'horizontal' ||
         props.disabledOverflow;
       // >>>>> Children
-      const wrappedChildList =
-        mergedMode.value !== 'horizontal' || props.disabledOverflow
+      const getWrapperList = childList => {
+        return mergedMode.value !== 'horizontal' || props.disabledOverflow
           ? childList
           : // Need wrap for overflow dropdown that do not response for open
             childList.map((child, index) => (
@@ -458,6 +460,7 @@ export default defineComponent({
                 v-slots={{ default: () => child }}
               ></MenuContextProvider>
             ));
+      };
       const overflowedIndicator = slots.overflowedIndicator?.() || <EllipsisOutlined />;
 
       return wrapSSR(
@@ -470,7 +473,7 @@ export default defineComponent({
           class={[className.value, attrs.class, hashId.value]}
           role="menu"
           id={props.id}
-          data={wrappedChildList}
+          data={getWrapperList(childList)}
           renderRawItem={node => node}
           renderRawRest={omitItems => {
             // We use origin list since wrapped list use context to prevent open
@@ -514,7 +517,7 @@ export default defineComponent({
         >
           <Teleport to="body">
             <div style={{ display: 'none' }} aria-hidden>
-              <PathContext>{wrappedChildList}</PathContext>
+              <PathContext>{getWrapperList(getChildrenList())}</PathContext>
             </div>
           </Teleport>
         </Overflow>,