Material-ui: [Dialog] onRequestClose seems not to be fired - what I am doing wrong ?

Created on 6 Dec 2015  ·  3Comments  ·  Source: mui-org/material-ui

I am testing around with ReactJS and using Material-Ui. For a small Test Component I am using Dialog. I am using like the same code as in your example but this seems not to work. Maybe there is a bug or the docs were not clear enough for me.

Here is the Code

const {Dialog, FlatButton} = MUI;

Home = React.createClass({
  getInitialState() {
    return {
      welcomeModal: false
    };
  },
  openWelcomeDialog() {
    this.setState({welcomeModal:true});
  },
  closeWelcomeDialog(buttonClicked) {
    console.log('Close The Welcome Dialog.');
    this.setState({welcomeModal:false});
  },
  render() {
    let modalActions = [
      { text: 'Cancel' }
    ];
    return (
      <div>
        <h1>Welcome to my app</h1>
        <a href="#" onClick={this.openWelcomeDialog}>Open the Welcome Modal</a>
        <Dialog
          title="Welcome Modal"
          actions={modalActions}
          autoDetectWindowHeight={true}
          autoScrollBodyContent={true}
          open={this.state.welcomeModal}
          onRequestClose={this.closeWelcomeDialog}>
        <div style={{height: '1000px'}}>
          Really long content
        </div>
        </Dialog>
      </div>
    );
  }
});

What happens:

When I click on the link the event will be fired and the modal is opening in the right way. But: It does not matter on what I am clicking if in the background or on the Cancel-Button: The Modal will not be closed and also the console.log will not be fired ... so: The method will not be called! In my example its impossible to close the modal.

Most helpful comment

I have the same issue, and I'm using injectTapEventPlugin(). And everything else related to events seems to be working. Should I check for something else?

The problem is pretty much the same as in the opening topic, no matter where I click - it does not fired.

All 3 comments

First, are you calling injectTapEventPlugin()?

Oh .. 'rly ? Now it works. I was trying to find the problem for a while now ...

So the answer is: No, I was not calling it. Did not saw this referenced in the Material-Ui Docs. Thanks @oliviertassinari !

I have the same issue, and I'm using injectTapEventPlugin(). And everything else related to events seems to be working. Should I check for something else?

The problem is pretty much the same as in the opening topic, no matter where I click - it does not fired.

Was this page helpful?
0 / 5 - 0 ratings