Modal does not close as expected

Question

Expected behavior

Click on Signin,Modal opens
Click outside the modal or hit esc,modal closes

Actual behavior

Click on Signin,Modal does not open because onClose fires right away

Here is the flow of the program:

App.js is rendered, Header is rendered and an openSignIn callback props is passed to it, the openSignIn callback function is triggered when the user clicks the SignIn Link and when the callback is called, it will cause the signinOpen in App.js to become true, signinOpen is passed as the prop open in Registration component alongside the closeSignin callback function, when Registration.js recieves a prop it will call componentWillReceiveProps function and the isOpen state in Registration component will become whatever the open prop is

App.js:

import React, { Component } from 'react';
import {BrowserRouter as Router,Route} from 'react-router-dom';

import './App.css';

//Components imports
import Homepage from './components/Homepage/Homepage';
import Header from './components/Header/Header'

import Registration from './components/Registration/Registration';
import About from './components/About/About';
class App extends Component {

    state = {
        signinOpen:false
    }
    openSignIn = ()=>{
        console.log("openSignin in app.js called")
        this.setState({signinOpen:true},()=>{
            console.log("in app.js,signinOpen is",this.state.signinOpen);  
        });

    }
    closeSignin = ()=>{
        console.log("closeSignin called in app.js");
        this.setState({signinOpen:false});
    }
    render() {
        return (
        <Router>
          <div className="App">

            <Header openSignIn = {this.openSignIn}/>

            <Route path="/" exact render = {()=><Homepage/> }></Route>
            <Route path="/about" component={About}/>   

            <Registration 
            open = {this.state.signinOpen}
            closeSignin = {this.closeSignin}
            />

          </div>
        </Router>
        );
      }
}

export default App;

Registration.js:

import React,{Component} from 'react';
import './Registration.css';

import { Modal } from 'semantic-ui-react'

class Registration extends Component{
    constructor(props){
        super(props);
        this.state = {
            isOpen:false
        }
        this.handleClose = this.handleClose.bind(this);

    }

    componentWillReceiveProps(nextProps){
        console.log("next props called, nextProps.open is: ")
        console.log(nextProps.open);

        this.setState({isOpen:nextProps.open},()=>{
            console.log("now isOpen in Registration state is: ")
            console.log(this.state.isOpen);
        });
    }
    handleClose = ()=>{
        console.log("handle close in registration called");
        this.setState({isOpen:false});
        this.props.closeSignin();

    }

    render(){

        return(
                <Modal 
                    open={this.state.isOpen}
                    onClose={()=>this.handleClose}
                    closeOnEscape={true}
                    closeOnRootNodeClick={true}
                    closeIcon= {true}
                >    
                    <Modal.Header>
                        Delete Your Account
                    </Modal.Header>
                    <Modal.Content>
                        <p>Are you sure you want to delete your account</p>
                    </Modal.Content>
                </Modal>
        )
    }
}
export default Registration;

Header.js:

import React,{Component} from 'react';
import './Header.css';

import { Grid } from 'semantic-ui-react'
import { Link } from 'react-router-dom';

import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

class Header extends Component{
    state = {
        loggedIn:false
    }
    render(){
        return(
            <Grid divided='vertically'>
                    <Grid.Row>
                        <Grid.Column width={5}></Grid.Column>

                        <Grid.Column width={7}> 
                            <header className="header">
                                <Link className="header-button" to="/about">About</Link>
                                <Link className="header-button" to="/polls">Poll List</Link>
                                {/*Instead of just adding the following link, we will do a check if the user is logged in,
                                is he's logged in we show a dropdown menu that says welcome */}
                                <Link className="header-button" to="#" onTouchTap={this.props.openSignIn}>SignIn</Link>                        
                            </header>     
                        </Grid.Column>
                        <Grid.Column width={2}></Grid.Column>
                    </Grid.Row>  

                </Grid>


        )
    }
}
export default Header;

brianespinosa brianespinosa · Accepted Answer · 2018-05-24T04:59:34

Out of the box, the SUIR Modal component functions exactly as you are expecting, including handling the open state internally itself. The moment you define the 'open' prop on a Modal component, you are opting out of the default state internally which makes you responsible for controlling that state.

I'd recommend defining a trigger prop with the component you would like to trigger the modal and use all of the state functionality that SUIR provides.

Modal does not close as expected

1 Answers