Workaround for event propagation issue in NavDropdown (react-bootstrap)

CheckboxInNavDropdown.js

import React from 'react'
import {
  Navbar,
  Nav,
  NavDropdown,
  MenuItem,
  Checkbox
} from 'react-bootstrap'

class CheckboxInNavDropdown extends React.Component {

  constructor(props) {
    super(props)

    this.state = { flag: false, open: false }
  }

  render() {
    return (
      <Navbar fluid>
        <Nav>
          <NavDropdown
            eventKey={1}
            id="sample-dropdown"
            title="Filters"
            open={this.state.open}
            onToggle={(isOpen, event, source) => {
              // Prevent dropdown from toggling when an input within it was selected
              if (source.source === 'select') {
                return true;
              }

              this.setState({open: isOpen})
            }}>
            <MenuItem eventKey={1.1}>
              <Navbar.Form>
                {/* stop event propagation (https://github.com/react-bootstrap/react-bootstrap/issues/3105) */}
                <div onClick={ (e) => e.stopPropagation()}>
                  <Checkbox
                    checked={this.state.flag}
                    onChange={(e) => { this.setState({flag: e.target.checked}) }}
                    >
                      Test checkbox
                  </Checkbox>
                </div>
              </Navbar.Form>
            </MenuItem>
          </NavDropdown>
        </Nav>
      </Navbar>)
  }
}

export default CheckboxInNavDropdown