antd Dropdown: Stop Propagation of Click Trigger

user_3870798 0
Viewed 1988

I'm looking for a way to stopPropagation() the click event of an antd Dropdown component with a sole 'click' trigger.

Here's an example of a Dropdown where the open/close click event is propagated to the parent Collapse header, which causes the Panel to collapse/expand, which is undesired:

https://codesandbox.io/s/stop-propagation-dropdown-trigger-click-cg005

Screenshot

Note that click events of the button and the menu items can be stopped from propagating in the respective event handlers.

What I'm looking for is how to do the same for the dropdown click events (click on the "⋯" part), which doesn't seem to be easily accessible.

antd
2 Answers

Providing the onClick={e => e.stopPropagation()} callback to the immediate child of <Dropdown trigger={["click"]}> should solve the issue. Tt worked for me:

return (
            <Dropdown trigger={["click"]} overlay={actionsMenu}>
                <div onClick={e => e.stopPropagation()} className="action-button-container">
                    <MoreOutlined />
                </div>
            </Dropdown>
        )
user_158634300

@shimikano, as for your particular case, you can override the buttons by using the buttonsRender prop from the <Dropdown.Button> component. buttonsRender is a function that receives an array with 2 ReactNode elements inside, first one is the actual button (named Dropdown in your case), and the second one is more icon which you can override with the same icon to which you have access and can provide the onClick callback and call event.stopPropagation() inside

buttonsRender={buttons => {
    buttons[1] = <MoreOutlined onClick={e => e.stopPropagation()} />;
    return buttons;
}}

Here is how the collapse header would look like:

const header = (
        <Space wrap>
            <Dropdown.Button
                size="small"
                trigger={["click"]}
                onClick={handleButtonClick}
                overlay={menu}
                buttonsRender={buttons => {
                    buttons[1] = <MoreOutlined onClick={e => e.stopPropagation()} />;
                    return buttons;
                }}
            >
                Dropdown
            </Dropdown.Button>
        </Space>
    );
user_158634300
Related