Problem description:
I'm trying to create a dropdown that contains a couple of choices that the user can select (a checkbox list one could say). It's basically a multiple select thingy.

So I wan't to keep the dropdown menu open while the user is interacting with it.
So, I know that I then have to to take "control" over the isOpen prop and supply that to downshift. That all works fine.

The issue that I'm facing is that if the user clicks outside the downshift component (the root component) the menu should close.

I found this piece of code in the example:

  handleStateChange = changes => {
    const {isOpen, type} = changes
    if (type === Downshift.stateChangeTypes.mouseUp) {
      this.setState({isOpen})
    }
  }

That seems to do the trick...but...for one it seems a little bit "complicated" (or how should I put it) and I really don't know why I need this and how it all works together.

Suggested solution:
Either better documentation about this type of situation or some other means to tell downshift that when the user clicks outside just close it, ignoring isOpen prop.
React Bootstrap has a prop called rootClose on its overlays that handles this for example.