Button event propagation

[mostafaelassar]

I have used Wrapper alongside other components inside MyComponent where it has its own click event handler.

<MyComponent onClick={this.handleClick}>
    {otherComponents}
    <Wrapper>
        <Button>
          click me
        </Button>
        <Menu className='MyMenuButton-menu'>
          <ul>{menuItems}</ul>
        </Menu>
    </Wrapper>
</MyComponent>

It would seem that a click on Button propagates event to MyComponent & triggers its click event handler.

[shirshendubhowmick]

You can handle this in your MyComponent ?

[mostafaelassar]

At first I got around this by using this onClick handler on Button

    handleClick = (e: React.MouseEvent) => {
        const { disabled } = this.props;
        e.stopPropagation();
        if (disabled) {
            return;
        }
        if (document.querySelector(`#${this.wrapperId} > [role="menu"]`)) {
            closeMenu(this.wrapperId);
        } else {
            openMenu(this.wrapperId);
        }
    };

But then I used this one instead on Wrapper since I had other buttons inside Menu itself.

handleClick = (e: React.MouseEvent) => {
    e.stopPropagation();
};

[shirshendubhowmick]

Is it possible to share a working example ?