React-bootstrap: Input element inside MenuItem

[AnderssonChristian]

I am trying to implement a dropdown button that looks like this:

It contains a list of options wrapped inside a <Checkbox> component. These work fine, except for the one that has the input - clicking it closes the dropdown preventing you from typing in it.

I looked at the docs and found the "Custom Dropdown Components" section where there is a dropdown with an input. However, now that I implemented it in my app I found that clicking outside the dropdown doesn't close it; you have to click the trigger again.

How would I go about achieving the desired behavior?

[taion]

please search existing issues first https://github.com/react-bootstrap/react-bootstrap/issues/2324

[AnderssonChristian]

@taion Apologies. I must have missed that one somehow.

Since there doesn't seem to be any documentation for RootCloseWrapper, for any future readers that may stumble upon this:

You need to install react-overlays and import ReactRootWrapper. Modifying the sample code, the component should now look something like:

<RootCloseWrapper onRootClose={this.setOpenStateToFalse}>
  <Dropdown id="dropdown-custom-menu" open={this.state.open} onToggle={this.toggleOpenState}>
    <CustomToggle bsRole="toggle">Custom toggle</CustomToggle>
    <CustomMenu bsRole="menu">
      <MenuItem eventKey="1">Red</MenuItem>
      <MenuItem eventKey="2">Blue</MenuItem>
      <MenuItem eventKey="3" active>Orange</MenuItem>
      <MenuItem eventKey="1">Red-Orange</MenuItem>
    </CustomMenu>
  </Dropdown>
</RootCloseWrapper>

[jjtfsalgado]

@AnderssonChristian Thank you!!! I struggled a bit with this one but with your example worked perfectly! Thank you!