vendredi 25 juin 2021

How to reset Material UI Checkbox on Dialog close

I've created a Dialog component via Material UI, dynamically imported from another file.

It works fine, except the checkboxes (also created with Material UI) inside this Dialog do not reset after each time Dialog closes. They only reset on page refresh. Other types of input, such as text or password do reset themselves automatically.

Here is the code for the original Dialog modal component:

import React, {useState, useEffect} from "react";
import Button from "@material/react-button";

import Divider from "@material-ui/core/Divider";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogTitle from "@material-ui/core/DialogTitle";
import TextField from "@material-ui/core/TextField";
import FormGroup from "@material-ui/core/FormGroup";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Checkbox from "@material-ui/core/Checkbox";

const SearchModal = (props) => {

    const [checkState, setCheckState] = useState({
        checkedQuestions: true,
        checkedAnswers: true,
        checkedVerified: true,
        checkedPending: true,
        checkedDisputed: false
    });

    useEffect(() => {
        if(
            checkState.checkedQuestions === false &&
            checkState.checkedAnswers === false
        ){
            setCheckState({
                ...checkState,
                checkedQuestions: true,
                checkedAnswers: true
            });
        }
        if(
            checkState.checkedVerified === false &&
            checkState.checkedPending === false &&
            checkState.checkedDisputed === false
        ){
            setCheckState({
                ...checkState,
                checkedVerified: true,
                checkedPending: true,
                checkedDisputed: false
            });
        }
    });

    const checkSet = (event) => {
        setCheckState({
            ...checkState,
            [event.target.name]: event.target.checked
        });
    }

    return(
        <Dialog
            open={props.searchOpen}
            onClose={props.handleClose}
            aria-labelledby="searchModalTitle"
            aria-describedby="searchModalDescription"
            id="searchModal"
        >
            <DialogTitle id="dialog">{"Search tolodire."}</DialogTitle>
            <DialogContent>
                <DialogContentText className="marginBottom-17" id="searchModalDescription">
                    Search for questions or answers.
                </DialogContentText>
                <TextField
                    required
                    type="search"
                    id="searchQuery"
                    label="Enter keywords or sentences"
                    placeholder="Required"
                    variant="outlined"
                    data-owner="searchModal"
                    autoFocus
                />
                <DialogContentText className="marginTop-20 marginBottom-10">
                    Use filters to search in detail.
                </DialogContentText>
                <FormGroup row className="marginTop-5">
                    <FormControlLabel
                        control={
                            <Checkbox
                                color="default"
                                checked={checkState.checkedQuestions}
                                onChange={(e) => checkSet(e)}
                                name="checkedQuestions"
                            />
                        }
                        label="Questions"
                    />
                    <FormControlLabel
                        control={
                            <Checkbox
                                color="default"
                                checked={checkState.checkedAnswers}
                                onChange={(e) => checkSet(e)}
                                name="checkedAnswers"
                            />
                        }
                        label="Answers"
                    />
                </FormGroup>
                <Divider/>
                <FormGroup row>
                    <FormControlLabel
                        control={
                            <Checkbox
                                color="default"
                                checked={checkState.checkedVerified}
                                onChange={(e) => checkSet(e)}
                                name="checkedVerified"
                            />
                        }
                        label="Verified"
                    />
                    <FormControlLabel
                        control={
                            <Checkbox
                                color="default"
                                checked={checkState.checkedPending}
                                onChange={(e) => checkSet(e)}
                                name="checkedPending"
                            />
                        }
                        label="Pending Verification"
                    />
                    <FormControlLabel
                        control={
                            <Checkbox
                                color="default"
                                checked={checkState.checkedDisputed}
                                onChange={(e) => checkSet(e)}
                                name="checkedDisputed"
                            />
                        }
                        label="Disputed"
                    />
                </FormGroup>
            </DialogContent>
            <DialogActions>
                <Button raised className="button regularButton font-body" onClick={props.handleClose}>
                    Search
                </Button>
            </DialogActions>
        </Dialog>
    );
}

export default SearchModal

I've already tried searching this issue on Google and StackOverflow, yet, I haven't found any solution. Any contribution is appreciated.

P.S: The handleClose const is on another file;

const [searchOpen, setSearchOpen] = useState(false);

const handleSearchOpen = () => {
    setSearchOpen(true);
};

const handleClose = () => {
    setSearchOpen(false);
};



Aucun commentaire:

Enregistrer un commentaire