fix: menu arrow not work

Author: tangjinzhou

components/menu/src/Menu.tsx

@@ -346,17 +346,21 @@ export default defineComponent({
     };
 
     const lastVisibleIndex = ref(0);
-    const expandIcon: MenuProps['expandIcon'] = opt => {
-      let icon = props.expandIcon || slots.expandIcon;
-      icon = typeof icon === 'function' ? icon(opt) : icon;
-      return cloneElement(
-        icon,
-        {
-          class: `${prefixCls.value}-submenu-expand-icon`,
-        },
-        false,
-      );
-    };
+    const expandIcon = computed<MenuProps['expandIcon']>(() =>
+      props.expandIcon || slots.expandIcon
+        ? opt => {
+            let icon = props.expandIcon || slots.expandIcon;
+            icon = typeof icon === 'function' ? icon(opt) : icon;
+            return cloneElement(
+              icon,
+              {
+                class: `${prefixCls.value}-submenu-expand-icon`,
+              },
+              false,
+            );
+          }
+        : null,
+    );
     useProvideMenu({
       store,
       prefixCls,

components/menu/src/SubMenu.tsx

@@ -230,41 +230,42 @@ export default defineComponent({
     );
 
     return () => {
-      const icon = getPropsSlot(slots, props, 'icon');
-      const title = renderTitle(getPropsSlot(slots, props, 'title'), icon);
       const subMenuPrefixClsValue = subMenuPrefixCls.value;
-      const expandIcon = props.expandIcon || slots.expandIcon || menuExpandIcon;
-      let titleNode = (
-        <div
-          style={directionStyle.value}
-          class={`${subMenuPrefixClsValue}-title`}
-          tabindex={mergedDisabled.value ? null : -1}
-          ref={elementRef}
-          title={typeof title === 'string' ? title : null}
-          data-menu-id={key}
-          aria-expanded={open.value}
-          aria-haspopup
-          aria-controls={popupId}
-          aria-disabled={mergedDisabled.value}
-          onClick={onInternalTitleClick}
-          onFocus={onInternalFocus}
-        >
-          {title}
-
-          {/* Only non-horizontal mode shows the icon */}
-          {mode.value !== 'horizontal' && expandIcon ? (
-            expandIcon({ ...props, isOpen: open.value })
-          ) : (
-            <i class={`${subMenuPrefixClsValue}-arrow`} />
-          )}
-        </div>
-      );
+      let baseTitleNode = () => {
+        const icon = getPropsSlot(slots, props, 'icon');
+        const expandIcon = props.expandIcon || slots.expandIcon || menuExpandIcon.value;
+        const title = renderTitle(getPropsSlot(slots, props, 'title'), icon);
+        return (
+          <div
+            style={directionStyle.value}
+            class={`${subMenuPrefixClsValue}-title`}
+            tabindex={mergedDisabled.value ? null : -1}
+            ref={elementRef}
+            title={typeof title === 'string' ? title : null}
+            data-menu-id={key}
+            aria-expanded={open.value}
+            aria-haspopup
+            aria-controls={popupId}
+            aria-disabled={mergedDisabled.value}
+            onClick={onInternalTitleClick}
+            onFocus={onInternalFocus}
+          >
+            {title}
 
+            {/* Only non-horizontal mode shows the icon */}
+            {mode.value !== 'horizontal' && expandIcon ? (
+              expandIcon({ ...props, isOpen: open.value })
+            ) : (
+              <i class={`${subMenuPrefixClsValue}-arrow`} />
+            )}
+          </div>
+        );
+      };
+      let titleNode = () => null;
       if (!overflowDisabled.value && mode.value !== 'inline') {
-        const triggerMode = triggerModeRef.value;
-        titleNode = (
+        titleNode = () => (
           <PopupTrigger
-            mode={triggerMode}
+            mode={triggerModeRef.value}
             prefixCls={subMenuPrefixClsValue}
             visible={!props.internalPopupClose && open.value}
             popupClassName={popupClassName.value}
@@ -283,13 +284,13 @@ export default defineComponent({
               ),
             }}
           >
-            {titleNode}
+            {baseTitleNode()}
           </PopupTrigger>
         );
       } else {
         // 包裹一层，保持结构一致，防止动画丢失
         // https://github.com/vueComponent/ant-design-vue/issues/4325
-        titleNode = <PopupTrigger>{titleNode}</PopupTrigger>;
+        titleNode = () => <PopupTrigger>{baseTitleNode()}</PopupTrigger>;
       }
       return (
         <MenuContextProvider mode={renderMode.value}>
@@ -311,16 +312,21 @@ export default defineComponent({
             onMouseenter={onMouseEnter}
             onMouseleave={onMouseLeave}
             data-submenu-id={key}
-          >
-            {titleNode}
+            v-slots={() => {
+              return (
+                <>
+                  {titleNode()}
 
-            {/* Inline mode */}
-            {!overflowDisabled.value && (
-              <InlineSubMenuList id={popupId} open={open.value} keyPath={keysPath.value}>
-                {slots.default?.()}
-              </InlineSubMenuList>
-            )}
-          </Overflow.Item>
+                  {/* Inline mode */}
+                  {!overflowDisabled.value && (
+                    <InlineSubMenuList id={popupId} open={open.value} keyPath={keysPath.value}>
+                      {slots.default?.()}
+                    </InlineSubMenuList>
+                  )}
+                </>
+              );
+            }}
+          ></Overflow.Item>
         </MenuContextProvider>
       );
     };

components/menu/src/hooks/useMenuContext.ts

@@ -75,7 +75,7 @@ export interface MenuContextProps {
 
   // // Icon
   // itemIcon?: RenderIconType;
-  expandIcon?: (p?: { isOpen: boolean; [key: string]: any }) => any;
+  expandIcon?: ComputedRef<(p?: { isOpen: boolean; [key: string]: any }) => any>;
 
   // // Function
   onItemClick: MenuClickEventHandler;

components/vc-overflow/Item.tsx

@@ -71,28 +71,27 @@ export default defineComponent({
         overflowProps['aria-hidden'] = true;
       }
 
-      const itemNode = (
-        <Component
-          class={classNames(!invalidate && prefixCls)}
-          style={overflowStyle}
-          {...overflowProps}
-          {...restProps}
-          ref={itemNodeRef}
-        >
-          {childNode}
-        </Component>
-      );
-
       // 使用 disabled  避免结构不一致 导致子组件 rerender
       return (
         <ResizeObserver
           disabled={!responsive}
           onResize={({ offsetWidth }) => {
             internalRegisterSize(offsetWidth);
           }}
-        >
-          {itemNode}
-        </ResizeObserver>
+          v-slots={{
+            default: () => (
+              <Component
+                class={classNames(!invalidate && prefixCls)}
+                style={overflowStyle}
+                {...overflowProps}
+                {...restProps}
+                ref={itemNodeRef}
+              >
+                {childNode}
+              </Component>
+            ),
+          }}
+        ></ResizeObserver>
       );
     };
   },

components/vc-overflow/Overflow.tsx

@@ -302,7 +302,7 @@ const Overflow = defineComponent({
           };
 
       // >>>>> Rest node
-      let restNode: VueNode;
+      let restNode = () => null;
       const restContextProps = {
         order: displayRest ? mergedDisplayCount.value : Number.MAX_SAFE_INTEGER,
         className: `${itemPrefixCls.value}-rest`,
@@ -313,19 +313,21 @@ const Overflow = defineComponent({
       if (!renderRawRest) {
         const mergedRenderRest = renderRest || defaultRenderRest;
 
-        restNode = (
+        restNode = () => (
           <Item
             {...itemSharedProps}
             // When not show, order should be the last
             {...restContextProps}
-          >
-            {typeof mergedRenderRest === 'function'
-              ? mergedRenderRest(omittedItems.value)
-              : mergedRenderRest}
-          </Item>
+            v-slots={{
+              default: () =>
+                typeof mergedRenderRest === 'function'
+                  ? mergedRenderRest(omittedItems.value)
+                  : mergedRenderRest,
+            }}
+          ></Item>
         );
       } else if (renderRawRest) {
-        restNode = (
+        restNode = () => (
           <OverflowContextProvider
             value={{
               ...itemSharedProps,
@@ -337,7 +339,7 @@ const Overflow = defineComponent({
         );
       }
 
-      const overflowNode = (
+      const overflowNode = () => (
         <Component
           class={classNames(!invalidate.value && prefixCls, className)}
           style={style}
@@ -346,7 +348,7 @@ const Overflow = defineComponent({
           {mergedData.value.map(internalRenderItemNode)}
 
           {/* Rest Count Item */}
-          {showRest.value ? restNode : null}
+          {showRest.value ? restNode() : null}
 
           {/* Suffix Node */}
           {suffix && (
@@ -357,17 +359,18 @@ const Overflow = defineComponent({
               registerSize={registerSuffixSize}
               display
               style={suffixStyle}
-            >
-              {suffix}
-            </Item>
+              v-slots={{ default: () => suffix }}
+            ></Item>
           )}
         </Component>
       );
       // 使用 disabled  避免结构不一致 导致子组件 rerender
       return (
-        <ResizeObserver disabled={!isResponsive.value} onResize={onOverflowResize}>
-          {overflowNode}
-        </ResizeObserver>
+        <ResizeObserver
+          disabled={!isResponsive.value}
+          onResize={onOverflowResize}
+          v-slots={{ default: overflowNode }}
+        ></ResizeObserver>
       );
     };
   },

components/vc-overflow/RawItem.tsx

@@ -35,9 +35,8 @@ export default defineComponent({
             {...restContext}
             {...restProps}
             {...props}
-          >
-            {slots.default?.()}
-          </Item>
+            v-slots={slots}
+          ></Item>
         </OverflowContextProvider>
       );
     };