fix: dropdown submenu style error #4351

close #4351

Author: tangjinzhou

components/dropdown/dropdown.tsx

@@ -63,7 +63,7 @@ const Dropdown = defineComponent({
       // menu should be focusable in dropdown defaultly
       const overlayProps = overlayNode && getPropsData(overlayNode);
       const { selectable = false, focusable = true } = (overlayProps || {}) as any;
-      const expandIcon = (
+      const expandIcon = () => (
         <span class={`${prefixCls}-menu-submenu-arrow`}>
           <RightOutlined class={`${prefixCls}-menu-submenu-arrow-icon`} />
         </span>

components/dropdown/style/index.less

@@ -68,6 +68,9 @@
     &-submenu-popup {
       position: absolute;
       z-index: @zindex-dropdown;
+      background: transparent;
+      box-shadow: none;
+      transform-origin: 0 0;
 
       > .@{dropdown-prefix-cls}-menu {
         transform-origin: 0 0;
@@ -81,7 +84,6 @@
       ul {
         margin-right: 0.3em;
         margin-left: 0.3em;
-        padding: 0;
       }
     }
 

components/menu/src/Menu.tsx

@@ -49,6 +49,8 @@ export const menuProps = {
   triggerSubMenuAction: { type: String as PropType<TriggerSubMenuAction>, default: 'hover' },
 
   getPopupContainer: Function as PropType<(node: HTMLElement) => HTMLElement>,
+
+  expandIcon: Function as PropType<(p?: { isOpen: boolean; [key: string]: any }) => any>,
 };
 
 export type MenuProps = Partial<ExtractPropTypes<typeof menuProps>>;
@@ -66,6 +68,7 @@ export default defineComponent({
     'click',
     'update:activeKey',
   ],
+  slots: ['expandIcon'],
   setup(props, { slots, emit }) {
     const { prefixCls, direction } = useConfigInject('menu', props);
     const store = ref<Record<string, StoreMenuInfo>>({});
@@ -371,6 +374,7 @@ export default defineComponent({
       unRegisterMenuInfo,
       selectedSubMenuEventKeys,
       isRootMenu: true,
+      expandIcon: props.expandIcon || slots.expandIcon,
     });
     return () => {
       const childList = flattenChildren(slots.default?.());

components/menu/src/SubMenu.tsx

@@ -24,6 +24,7 @@ const subMenuProps = {
   popupOffset: Array as PropType<number[]>,
   internalPopupClose: Boolean,
   eventKey: String,
+  expandIcon: Function as PropType<(p?: { isOpen: boolean; [key: string]: any }) => any>,
 };
 
 export type SubMenuProps = Partial<ExtractPropTypes<typeof subMenuProps>>;
@@ -32,7 +33,7 @@ export default defineComponent({
   name: 'ASubMenu',
   inheritAttrs: false,
   props: subMenuProps,
-  slots: ['icon', 'title'],
+  slots: ['icon', 'title', 'expandIcon'],
   emits: ['titleClick', 'mouseenter', 'mouseleave'],
   setup(props, { slots, attrs, emit }) {
     useProvideFirstLevel(false);
@@ -84,6 +85,7 @@ export default defineComponent({
       selectedSubMenuEventKeys,
       motion,
       defaultMotions,
+      expandIcon: menuExpandIcon,
     } = useInjectMenu();
 
     registerMenuInfo(eventKey, menuInfo);
@@ -226,6 +228,7 @@ export default defineComponent({
       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}
@@ -244,8 +247,8 @@ export default defineComponent({
           {title}
 
           {/* Only non-horizontal mode shows the icon */}
-          {mode.value !== 'horizontal' && slots.expandIcon ? (
-            slots.expandIcon({ ...props, isOpen: open.value })
+          {mode.value !== 'horizontal' && expandIcon ? (
+            expandIcon({ ...props, isOpen: open.value })
           ) : (
             <i class={`${subMenuPrefixClsValue}-arrow`} />
           )}

components/menu/src/hooks/useMenuContext.ts

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