feat: add overflow trigger props

src/TabNavList/OperationNode.tsx

@@ -4,7 +4,7 @@ import Menu, { MenuItem } from 'rc-menu';
 import KeyCode from 'rc-util/lib/KeyCode';
 import * as React from 'react';
 import { useEffect, useState } from 'react';
-import type { EditableConfig, Tab, TabsLocale } from '../interface';
+import type { EditableConfig, Tab, TabsLocale, moreTrigger } from '../interface';
 import { getRemovable } from '../util';
 import AddButton from './AddButton';
 
@@ -19,6 +19,7 @@ export interface OperationNodeProps {
   activeKey: string;
   mobile: boolean;
   moreIcon?: React.ReactNode;
+  moreTrigger?: moreTrigger;
   moreTransitionName?: string;
   editable?: EditableConfig;
   locale?: TabsLocale;
@@ -37,6 +38,7 @@ const OperationNode = React.forwardRef<HTMLDivElement, OperationNodeProps>((prop
     locale,
     mobile,
     moreIcon = 'More',
+    moreTrigger = 'hover',
     moreTransitionName,
     style,
     className,
@@ -190,7 +192,7 @@ const OperationNode = React.forwardRef<HTMLDivElement, OperationNodeProps>((prop
     <Dropdown
       prefixCls={dropdownPrefix}
       overlay={menu}
-      trigger={['hover']}
+      trigger={[`${moreTrigger}`]}
       visible={tabs.length ? open : false}
       transitionName={moreTransitionName}
       onVisibleChange={setOpen}

src/TabNavList/index.tsx

@@ -23,6 +23,7 @@ import type {
   TabPosition,
   TabSizeMap,
   TabsLocale,
+  moreTrigger
 } from '../interface';
 import { genDataNodeKey, stringify } from '../util';
 import AddButton from './AddButton';
@@ -39,6 +40,7 @@ export interface TabNavListProps {
   extra?: TabBarExtraContent;
   editable?: EditableConfig;
   moreIcon?: React.ReactNode;
+  moreTrigger?: moreTrigger;
   moreTransitionName?: string;
   mobile: boolean;
   tabBarGutter?: number;

src/Tabs.tsx

@@ -18,6 +18,7 @@ import type {
   TabBarExtraContent,
   TabPosition,
   TabsLocale,
+  moreTrigger,
 } from './interface';
 
 /**
@@ -65,6 +66,7 @@ export interface TabsProps
 
   // Icons
   moreIcon?: React.ReactNode;
+  moreTrigger?: moreTrigger;
   /** @private Internal usage. Not promise will rename in future */
   moreTransitionName?: string;
   popupClassName?: string;
@@ -91,6 +93,7 @@ const Tabs = React.forwardRef<HTMLDivElement, TabsProps>((props, ref) => {
     tabBarExtraContent,
     locale,
     moreIcon,
+    moreTrigger,
     moreTransitionName,
     destroyInactiveTabPane,
     renderTabBar,
@@ -174,6 +177,7 @@ const Tabs = React.forwardRef<HTMLDivElement, TabsProps>((props, ref) => {
     editable,
     locale,
     moreIcon,
+    moreTrigger,
     moreTransitionName,
     tabBarGutter,
     onTabClick: onInternalTabClick,

src/interface.ts

@@ -3,6 +3,8 @@ import type React from 'react';
 import type { TabNavListProps } from './TabNavList';
 import type { TabPaneProps } from './TabPanelList/TabPane';
 
+export type moreTrigger = 'click' | 'hover';
+
 export type SizeInfo = [width: number, height: number];
 
 export type TabSizeMap = Map<

tests/overflow.test.tsx

@@ -92,6 +92,24 @@ describe('Tabs.Overflow', () => {
     jest.useRealTimers();
   });
 
+  it('should open dropdown on click when moreTrigger is set to click', () => {
+    jest.useFakeTimers();
+    const onChange = jest.fn();
+    const { container, unmount } = render(getTabs({ onChange, moreTrigger: 'click' }));
+    triggerResize(container);
+    act(() => {
+      jest.runAllTimers();
+    });
+    const button = container.querySelector('.rc-tabs-nav-more')
+    fireEvent.click(button);
+    act(() => {
+      jest.runAllTimers();
+    });
+    const dropdownOpen = container.querySelector('.rc-tabs-dropdown-open');
+    expect(dropdownOpen).not.toBeNull();
+    unmount();
+  });
+
   [KeyCode.SPACE, KeyCode.ENTER].forEach(code => {
     it(`keyboard with select keycode: ${code}`, () => {
       jest.useFakeTimers();