jeudi 20 janvier 2022

Material Ui Accordion closes automatically

             <Accordion>
              <AccordionSummary
                expandIcon={<ExpandMoreIcon />}
                aria-controls="panel1a-content"
                id="panel1a-header"
              >
                <h6 className="title">Categories</h6>
              </AccordionSummary>
              <AccordionDetails>
                <input onChange={handleCheck} type="checkbox" value="1" />
                <input onChange={handleCheck} type="checkbox" value="1" />
              </AccordionDetails>
            </Accordion>

I have placed input type checkbox inside material ui accordian details panels and whenever i click checkbox the accordion collapses automatically.

handleCheck function:

const handleCheck = (event) => {
      event.stopPropagation();
      const { id, checked } = event.target;

      setSelectedCategories([...selectedCategories, id]);
      if (!checked) {
        setSelectedCategories(selectedCategories.filter((item) => item !== id));
      }
    };

handleChange fnuction:

    const handleChange = (panel) => (event, isExpanded) => {
      setExpanded(isExpanded ? panel : false);
    };



Aucun commentaire:

Enregistrer un commentaire