Stop click event from propagating on popover target

Question

I am trying to disable popover open on checkbox change, placed inside the popover target. I've tried stopping onChange and onClick events on checkbox but it doesn't work as intended.

Any help would be much appreciated.

Here's the relevant code sandbox:

import React from "react";
import ReactDOM from "react-dom";
import { Button, Checkbox, Menu, MenuItem, Popover } from "@blueprintjs/core";

import "./styles.css";
import "@blueprintjs/core/lib/css/blueprint.css";
import "@blueprintjs/icons/lib/css/blueprint-icons.css";

function Dropdown() {
  return (
    <Menu>
      <MenuItem text="Item 1" />
      <MenuItem text="Item 2" />
    </Menu>
  );
}

function MyCheckbox() {
  return (
    <Checkbox
      onClick={e => {
        e.stopPropagation();
        return false;
      }}
    />
  );
}

function App() {
  return (
    <div className="App">
      <Popover content={<Dropdown />}>
        <Button text={<MyCheckbox />} rightIcon="caret-down" />
      </Popover>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

Wrap your checkbox in another container, and prevent that from propagating up the chain:

function MyCheckbox() {
  return (
    <div
      onClick={e => {
        e.stopPropagation();
      }}
    >
      <Checkbox />
    </div>
  );
}

See an updated sandbox here.