Stopping propogation of button that contains tooltip with link not working on Button

I am using the Material UI Button Component and in the button, there is text. And right next to that text, I have a tooltip. And in that tooltip, there is a link to an article. The idea is that I want the user to have a chance to be able to click the ‘read more’ link inside the tooltip before clicking the actual button. The issue is that when clicking the ‘read more’ link that is inside the tooltip, it actually clicks the button instead. I have tried to use the e.stopPropagation event that supposedly stops the component from bubbling to other elements. But it still doesnt prevent the button from being clicked instead of the ‘read more’ link that is within the tooltip. Please see my code below:

render() {
    const { buttonStyleOverride, classes } = this.props;
    const { buttonDisabled } = this.state;
    return (
      <Button
        name="buyItem"
        variant="outlined"
        style={buttonStyleOverride}
        className={classes.button}
        color="primary"
        disabled={buttonDisabled}
        onClick={
          this.addItems,
          e => e.stopPropagation()
        }>
        Buy Pikafoods
        <TooltipIcon
          title="You can read more about pikafoods here."
          learnMoreLink="https://pokemon.com/articles/pikafoods"
          style={{ position: 'relative', top: '-2px' }} />
      </Button>
    );
  }
}

Answer

It’s really strange a clickable tooltip inside a button, not very user friendly. However you have to stop the propagation in the tooltip event, not in the button, like this:

import { Button } from "@material-ui/core";
import AccessibilityIcon from "@material-ui/icons/Accessibility";

export default function App() {
  return (
    <div className="App">
      <Button
        name="buyItem"
        variant="outlined"
        color="primary"
        onClick={(e) => console.log("button")}
      >
        Buy Pikafoods
        <AccessibilityIcon
          onClick={(e) => {
            console.log("tooltip");
            e.stopPropagation();
          }}
        />
      </Button>
    </div>
  );
}

Advertisement

Answer