Polaris Modal OnClose calling itself

Excursionist
24 1 3

Hi.

I have an embedded app, built upon the react/polaris tutorial. I'm trying to use a modal to confirm a deletion action, but regardless of which action is taken in the modal, the onClose action is called after, causing the modal to re-activate itself. I can't seem to find any trace of this being an issue for anyone else online. I even copied my code into codepen using the polaris package and it does NOT call itself there... only in my code for some reason. Any help would be greatly appreciated.

 

import {
    Button,
    Card,
    Modal,
} from "@shopify/polaris";

class ThemeList extends React.Component {

    state = {
        modalActive: false
    }

    toggleModalActive = (message) => {
        console.log(`toggleModalActive: ${message}`);
        this.setState(({ modalActive }) => ({ modalActive: !modalActive }));
    };

    render() {
        const { modalActive } = this.state;
        return (
            <Card sectioned>
                <Button onClick={() => this.toggleModalActive('Button Clicked')}>Open</Button>
                <Modal
                    message={ `Are you sure you want to delete ${this.state.deleteNameBeingConfirmed}?` }
                    open={ modalActive }
                    onClose={() => this.toggleModalActive("onClose")}
                    primaryAction={ {
                        content: 'Confirm',
                        onAction: () => this.toggleModalActive("Confirm")
                    } }
                    secondaryActions={ [
                        {
                            content: 'Cancel',
                            onAction: () => this.toggleModalActive("Cancel")
                        },
                    ] }
                />
            </Card>
        );
    }

}

export default ThemeList;
0 Likes