close request is not working on dialog box

Question

When an icon is clicked, a dialog box with form should appear to either add a tab or delete specific tab. I have used reactjs, redux and material-ui for components. I could show the dialog box when icon is clicked but when i click on cancel button, dialog box does not get close.

What should i do to resolve it?

Here is my code

App.js

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
                  max_char: 32,
                  open: false,
                };
    this.handleChange = this.handleChange.bind(this);
    this.handleLogout = this.handleLogout.bind(this);
  }

  handleClose = () => this.setState({ open: false });

  handleOpen = () => this.setState({ open: true });

  render() {
      return (
            <div>
                <Header
                      tab={this.state.tabs}
                      open={this.state.open}
                      handleClose={this.handleClose}
                      handleToggle={this.handleToggle}
                />
                <Content
                    handleOpen={this.handleOpen}
                    handleClose={this.handleClose}
                />
            </div>
      );
  }
}

Header.js

class Header extends Component {
  render() {
    const tabs = _.map(this.props.tab, (tab) =>
         <span className="tab" key={tab.id}><a href="">{tab.description}</a></span>
    );

    return (
      <div>
        <AppBar
            title={tabs}
            iconElementRight={navigation}
            onLeftIconButtonTouchTap={this.props.handleToggle}
            style={{ background: '#fff' }}
        />
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    iconList: state.iconList
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({
    selectTabIcon
  }, dispatch);
}


const Content = (props) =>
    (
      <div className="content-section">
        <TabDialog />
      </div>
    );

TabDialog.js

class TabDialog extends Component {
      constructor(props) {
        super(props);
        this.state = {
                      open: false,
                    };
      }

      renderAddTab() {
        const actions = [
          <FlatButton
            label="Cancel"
            primary
            onTouchTap={this.props.createTab.close}
          />,
          <FlatButton
            label="Add Tab"
            primary
            keyboardFocused
            onTouchTap={this.props.createTab.close}
          />,
        ];
        return (
          <div className="device-action">
            <Dialog
                title="Add a Tab"
                actions={actions}
                modal={false}
                open={this.props.createTab.open}
                onRequestClose={this.props.createTab.close}
            >
            <div className="tab-name">
            <TextField
              floatingLabelText="Name"
              floatingLabelStyle={{ color: '#1ab394' }}
              floatingLabelFocusStyle={{ color: '#1db4c2' }}
              underlineStyle={{ borderColor: '#1ab394' }}
            />
            </Dialog>
          </div>
      );
      }

      renderDeleteTab() {
        const actions = [
          <FlatButton
            label="Cancel"
            primary
            onTouchTap={this.props.createTab.close}
          />,
          <FlatButton
            label="Delete"
            primary
            keyboardFocused
            onTouchTap={this.props.createTab.close}
          />,
        ];
        return (
        <div className="tab-action">
          <Dialog
              title="Delete"
              actions={actions}
              modal={false}
              open={this.props.createTab.open}
              onRequestClose={this.props.createTab.close} />
        </div>
      );
      }


      render() {
        const iconSelected = this.props.createTab;
        if (!iconSelected) {
          return (<div>Select</div>);
        }
        if (iconSelected === '1') {
          return (this.renderDeleteTab());
        }
        if (iconSelected === '2') {
          return (this.renderAddTab());
        }
    }
    }

    function mapStateToProps(state) {
      return {
        iconList: state.iconList,
        createTab: state.createTab,
      };
    }

    function mapDispatchToProps(dispatch) {
      return bindActionCreators({
        addTab,
        selectTabIcon
      }, dispatch);
    }

redux part

export function selectTabIcon(selectTab) {
      console.log('selected', selectTab.target.id);
      return {
        type: 'TAB_ICON_SELECTED',
        id: selectTab.target.id,
        open: true,
        close: () => false
      };
    }

    switch (action.type) {
      case 'TAB_ICON_SELECTED':
        console.log('tab', action);
        return action;

open props accept boolean and onRequestClose and onTouchTap props accepts function.

Why is my code not working? How can i overcome this issue?

Answer 1

The onRequestClose prop of Dialog takes a function not a boolean. So, you need to change the value of this.props.createTab.open to false inside that function. By this, the state will be changed by the redux and the value for open will be passed as false. This will close the Dialog.

Answer 2

I found the solution. onRequestClose and onTouchTap both accepts function. They need open to be false. Why i failed is i passed false value to close flag instead to open.

Now i have created a new action creator where i have passed an action to close it by setting open payload to false

export function closeTabIcon() {
  return {
    type: 'CLOSE_ICON',
    open: false
  }
}

reducer will be something like this

   case 'CLOSE_ICON':
     return action.open

Now in the OnRequestProps i passed this.props.closetabIcon.