Unable to customise Tabs Component responsive dropdown menu

[sagar7993]

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

1. Create ant design horizontal tabs component
2. View on mobile screen - if there are too many tabs, then the overflowing tabs are displayed inside a menu triggered by hovering on the 3 dots icon

What is expected?

I should be able to pass dropdown and menu component's props to the tabs component to control how the overflowing menu should be rendered. I want to trigger the overflow menu on click/contextmenu actions and not on hover which is the current behaviour.

What is actually happening?

I am unable to pass any props to control the dropdown menu that gets rendered for overflowing tabs. I want to set the getPopupContainer prop for the menu, as well as the trigger prop for the dropdown. I also want to set className and other menu component props here, but unable to do so.

Environment	Info
antd	4.5.0
React	16.13.1
System	Mac OS X
Browser	Chrome (Latest)

[afc163]

Maybe we can expose this to cusomise: https://github.com/react-component/tabs/blob/814d847bba2cac4a8bb0c31281227630cad815c3/src/TabNavList/OperationNode.tsx#L159

[sagar7993]

@afc163 Yes that would be super helpful. Basically if trigger, className, dropdown icon and popup container props are exposed, it would be great. Thanks

[zombieJ]

Hi @sagar7993 , set in mobile view and refresh. Dropdown is PC only which will not visible in mobile since it's not good in mobile view.

[sagar7993]

Hi @zombieJ I checked both PC and mobile views. You're right, this only happens in the PC version, but i strongly feel that we should have the option to customise the dropdown menu props here in PC. It would be good to be able to set a custom icon for the menu trigger, and also change popup container and other menu props. Please share your thoughts on this.

[zombieJ]

Hi @sagar7993 ,
What's your wishing customize dropdown look like? Let me take a look. Thanks.

[sagar7993]

Hi @zombieJ

Can we create a customize dropdown somewhat like this

<Tabs {...tabProps} dropdownMenu={{
    trigger={['click', 'contextMenu']},
    getPopupContainer={(trigger) => trigger.parentNode as HTMLElement}
    overlayClassName="responsive-dropdown"
    onVisibleChange={this.onVisibilityChanged}
    icon={<MenuOutlined />}
    {...dropdownMenuProps}
}}>
    <Tabs.TabPane {...tabPaneProps}>This is the content</Tabs.TabPane>
</Tabs

The dropdownMenu prop can probably accept all the props of the dropdown component and a icon component that accepts any ReactNode to display as the dropdown icon. What are your thoughts on this one

[zombieJ]

PR is welcomed : )

[ant-design-bot]

Hello @sagar7993. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please send your Pull Request to proper branch (feature branch for the new feature, master for bugfix and other changes), fill the Pull Request Template here, provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. Appreciate it advance and we are looking forward to your contribution!

你好 @sagar7993, 我们完全同意你的提议/反馈，欢迎直接在此仓库 创建一个 Pull Request 来解决这个问题。请将 Pull Request 发到正确的分支（新特性发到 feature 分支，其他发到 master 分支），务必填写 Pull Request 内的预设模板，提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等，并确保 CI 通过，我们会尽快进行 Review，提前感谢和期待您的贡献！

[rgosse]

This request overlaps with a bug I reported, can I submit a PR of a smaller scope, basically simply expose a getPopupContainer prop in Tabs and RcTabs?

[nora-white]

I would also love to see this addition! Not being able to pass a classname to the dropdown menu in the tabs is detrimental and prevents us from having consistent styles in our app. We have customized the styles of the antd dropdown, antd select, antd menu, and many others, so that they all look the same, and this new dropdown in the tabs will stick out like a sore thumb and will be the only dropdown in the app that looks different. Please expose the classname for the dropdown!

[Topthinking]

这个问题解决了么

[Topthinking]

看这个问题提出好久了，这个该怎么修复呢

[Topthinking]

有问题的图，参考issue #32232

我根据 react-component/tabs#320 修改了

还有，tabs组件要获取config-provider的getPopupContainer，传给rc-tabs

@afc163 快点合并代码修复吧，我自己修改的编译后的umd包的代码😞