[DropDownMenu] add callback onClose

[liesislukas]

Problem description

Building custom component which displays simple text and if clicked it shows drop down menu, when selection is done it shows simple text again. It's all great, except if user clicks to edit value, drop down menu is shown and he/she do not select any value and just clicks outside the menu. Menu collapses, onChange is not fired, material-ui input is displayed instead of simple text. I need onClose callback to make it work. It's easy addon.

Steps to reproduce

https://gist.github.com/liesislukas/3fdb51189c507c3e236936867bcba87f#file-dropdowneditonclick-reactjs-component

Versions

• Material-UI: v0.15.0
• React: 15.1.0
• Browser: Version 50.0.2661.102 (64-bit)

[liesislukas]

while this callback is not available I've done this:

After showing up menu i add global click event listener to document and when is clicked outside - i just make all needed stuff and remove event listener from global document.

  componentWillUpdate(nextProps, nextState) {
    if (this.state.show_input === false && nextState.show_input === true) {
      document.addEventListener('click', () => this.setState({show_input: false}), false);
    } else if (this.state.show_input === true && nextState.show_input === false) {
      document.removeEventListener('click', () => this.setState({show_input: false}), false);
    }
  }