reactjs - How to move view to the top of accordion in material ui

Question

I am using material ui accordion in my reactjs project. Here I am facing a problem when accordion opens I want to focus on the top of accordion detail content. I tried adding scrolling it to top but this does not seems to be working.

Here are my Code

<Accordion
                  key={i + 1}
                  square
                  expanded={expandAccordion === `panel${i + 1}`}
                  onChange={handleChange(`panel${i + 1}`, item.id)}
                >
                  <AccordionSummary
                    classes={{
                      root: classes.accordionSummery,
                    }}
                    id="accSummery"
                    className={classes.expansionPanel}
                    expandIcon={<ExpandMoreIcon />}
                    aria-controls="panel1d-content"
                    id="panel1d-header"
                  >
              
                    <Typography noWrap={true} className={classes.itemHarm}>
                      <Chip
                        label={item.harm}
                        color={item.harmColor}
                        style={{
                          backgroundColor: `${item.harm_color}`,
                          width: "100%",
                          minWidth: "100px",
                          color: "#ffffff",
                        }}
                      />
                  
               
                    <Typography style={{ flex: 1 }} />
                  
                    
              
                    </Typography>
                  </AccordionSummary>
                  <AccordionDetails>
                    <div style={{ width: "100%" }}>
                      {dispensingDetailLoading ? (
                        <div
                          style={{
                            display: "flex",
                            width: "100%",
                            justifyContent: "center",
                          }}
                        >
                          <CircularProgress color="primary" />
                        </div>
                      ) : (
                        <div ref={detailRef}>
                          <DetailComponent data={slide1} />
                          <DetailComponent data={slide2} />
                          <DetailComponent data={slide3} />
                          <DetailComponent data={slide4} />
                          <DetailComponent data={slide5} />
                          <DetailComponent data={slide6} />
                          <DetailComponent data={slide7} />
                        </div>
                      )}
                

Here is on change

const handleChange = (panel, id) => (event, newExpanded) => {
    setExpanded(newExpanded ? panel : false);
    // passing props to parent component
    handleAccordionChange(id, newExpanded, panel);
    if (newExpanded === true) {
      getDispensingData(id);
      setSlides(0);
    }
    onFocusView();
  };

  
  const detailRef = useRef();

  

  const onFocusView = () => {
    const scrollHeight = window.pageYOffset - window.innerHeight;
    const h = window.scrollY - detailRef.current.clientHeight;
    // const h = window.scrollY - detailRef.current.offsetTop;
    console.log("detailRef", detailRef);
    window.scrollTo({
      top: scrollHeight ,
      left: 0,
      behavior: "smooth",
    });
  };

question from:https://stackoverflow.com/questions/66061169/how-to-move-view-to-the-top-of-accordion-in-material-ui

Answer 1

Waitting for answers