fix: support submenu item title (#868)

Author: biubiukam

src/SubMenu/index.tsx

@@ -23,10 +23,11 @@ import { useMenuId } from '../context/IdContext';
 import PrivateContext from '../context/PrivateContext';
 
 export type SemanticName = 'list' | 'listTitle';
-export interface SubMenuProps extends Omit<SubMenuType, 'key' | 'children' | 'label'> {
+export interface SubMenuProps extends Omit<SubMenuType, 'key' | 'children' | 'label' | 'title'> {
   classNames?: Partial<Record<SemanticName, string>>;
   styles?: Partial<Record<SemanticName, React.CSSProperties>>;
   title?: React.ReactNode;
+  itemTitle?: string;
 
   children?: React.ReactNode;
 
@@ -51,6 +52,7 @@ const InternalSubMenu = React.forwardRef<HTMLLIElement, SubMenuProps>((props, re
     classNames: menuClassNames,
 
     title,
+    itemTitle,
     eventKey,
     warnKey,
 
@@ -252,7 +254,7 @@ const InternalSubMenu = React.forwardRef<HTMLLIElement, SubMenuProps>((props, re
       className={`${subMenuPrefixCls}-title`}
       tabIndex={mergedDisabled ? null : -1}
       ref={elementRef}
-      title={typeof title === 'string' ? title : null}
+      title={itemTitle ?? (typeof title === 'string' ? title : null)}
       data-menu-id={overflowDisabled && domDataId ? null : domDataId}
       aria-expanded={open}
       aria-haspopup

src/interface.ts

@@ -12,6 +12,7 @@ export interface SubMenuType extends ItemSharedProps {
   type?: 'submenu';
 
   label?: React.ReactNode;
+  title?: string;
 
   children: ItemType[];
 

src/utils/nodeUtil.tsx

@@ -36,8 +36,15 @@ function convertItemsToNodes(
           }
 
           // Sub Menu
+          const { title: itemTitle, ...subMenuRestProps } = restProps;
+
           return (
-            <MergedSubMenu key={mergedKey} {...restProps} title={label}>
+            <MergedSubMenu
+              key={mergedKey}
+              {...subMenuRestProps}
+              title={label}
+              itemTitle={typeof itemTitle === 'string' ? itemTitle : undefined}
+            >
               {convertItemsToNodes(children, components, prefixCls)}
             </MergedSubMenu>
           );
@@ -51,7 +58,12 @@ function convertItemsToNodes(
         const hasExtra = !!extra || extra === 0;
 
         return (
-          <MergedMenuItem key={mergedKey} {...restProps} extra={extra} itemData={{ ...opt, key: mergedKey }}>
+          <MergedMenuItem
+            key={mergedKey}
+            {...restProps}
+            extra={extra}
+            itemData={{ ...opt, key: mergedKey }}
+          >
             {hasExtra ? (
               <>
                 <span className={`${prefixCls}-item-label`}>{label}</span>

tests/Options.spec.tsx

@@ -41,5 +41,30 @@ describe('Options', () => {
 
     expect(container.children).toMatchSnapshot();
   });
+
+  it('uses submenu item title as native title without replacing label', () => {
+    const { container } = render(
+      <Menu
+        items={[
+          {
+            label: 'Users',
+            key: 'sub1',
+            title: 'People',
+            children: [
+              {
+                label: 'User 1',
+                key: 'user1',
+              },
+            ],
+          },
+        ]}
+      />,
+    );
+
+    const titleNode = container.querySelector('.rc-menu-submenu-title');
+
+    expect(titleNode).toHaveTextContent('Users');
+    expect(titleNode).toHaveAttribute('title', 'People');
+  });
 });
 /* eslint-enable */