title: How to handle "outside" click on Dialog (Modal)?
body: <p>My box closes when clicking outside of the box making me lose all the input.
  I want my box to close only when clicking on the cancel button.
  I am not sure what is making it close when clicking outside. Any help?</p>
  
  <p>I am using @material-ui/core</p>
  
  <pre><code>  _close() {
          DeviceCreationActions.close();
      }
  
  render() {
          const actions = [
              &lt;Button
                  id="device-create-dialog-close"
                  key="device-create-dialog-close"
                  onClick={this._close}
              &gt;
                {this.context.intl.formatMessage({id: 'Cancel'})}
              &lt;/Button&gt;
          ];
  
          if (0 &lt; this.state.stepIndex) {
              actions.push(&lt;Button
                  id="device-create-dialog-back"
                  key="device-create-dialog-back"
                  onClick={this._previousStep.bind(this)}
                &gt;
                  {this.context.intl.formatMessage({id: 'Back'})}
                &lt;/Button&gt;
              );
          }
  
          if (
              (1 &gt;= this.state.stepIndex &amp;&amp; 0 &lt; this.state['formStep' + this.state.stepIndex].length) ||
              (0 &lt; this.state.stepIndex)
          ) {
              actions.push(&lt;Button
                  id="device-create-dialog-next"
                  key="device-create-dialog-next"
                  onClick={2 === this.state.stepIndex ? this._save.bind(this) : this._nextStep.bind(this)}
                &gt;
                  {this.context.intl.formatMessage({id: 2 === this.state.stepIndex ? 'Create' : 'Next'})}
                &lt;/Button&gt;
              );
          }
  </code></pre>