[Dialog] Open state bug

[valentinvichnal]

Problem description

I created a Dialog component and control its open state with this.state.openState which is connected to this.props.open. Another component which contains this Dialog component, also include a button which sets the open prop to true for Dialog when clicked.

After the first button click the Dialog open prop was set to true, but it's openState state still false. It only changes to true after the second click on the button.

Any idea why this is happening? It should change the state on the first click because of the shouldComponentUpdate.

Subsequent clicks on the button works properly, only the first click on the button after the render has this bug.

Steps to reproduce

import React from 'react';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';

class DialogExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      openState: props.open
    };
  }
  // ... handleClose, handleSubmit
  shouldComponentUpdate(nextProps) {
    this.setState({ openState: nextProps.open });
    return true;
  }
  render() {
    const {openState} = this.state;
    const actions = [
      <FlatButton
        className="button"
        label="No"
        onTouchTap={this.handleClose}
        />,
      <FlatButton
        className="button"
        label="Yes"
        primary={true}
        onTouchTap={this.handleSubmit}
        />,
    ];
    return (
      <Dialog
        title="example"
        actions={actions}
        modal={true}
        open={openState}
        >
        Text?
      </Dialog>
    );
  }
}

export default DialogExample;

Versions

• Material-UI: 0.15.1
• React: 15.1.0
• Browser: Chrome, FF, IE

[nehalbhanushali]

@valentinvichnal does your application require the calling button to be in another component and not with the dialog? It would not happen if it is a part of the same component the dialog is.

[valentinvichnal]

@nehalbhanushali yes, because I have a list of item each has a related icon button for the Dialog.
When dialogs were in the same components it worked, but there is too much Dialog related code so I moved them to their own module.

Now I use only the props to check if the Dialog is open, pass a callback to the Dialog which can call it and it will change the open prop to false. It works but not a nice solution.

[aahan96]

@valentinvichnal Looks like we can close this issue then