Change selected button in a list on Material UI LIst Scroll - React

Question

I have a sticky Material UI List. I also have another list with just the headers which when clicked on will scroll the sticky list and take me to the corresponding category. However, I am not able to make it work when I scroll through the sticky list and the corresponding list header on the other list should be selected. I am using @makotot/ghostui to achieve scrollspy but its not working. Please advice.

This is my code.

import * as React from "react";
import Grid from "@mui/material/Grid";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemText from "@mui/material/ListItemText";
import ListSubheader from "@mui/material/ListSubheader";
import ListItemButton from "@mui/material/ListItemButton";
import Divider from "@mui/material/Divider";
import { map } from "lodash";
import { Scrollspy } from "@makotot/ghostui";

const categories = [0, 1, 2, 3, 4];

export default function PinnedSubheaderList() {
  const sectionRefs = React.useMemo(
    () => categories.map((i) => React.createRef<HTMLUListElement>()),
    []
  );

  const [selected, setSelected] = React.useState<number>(0);

  const handleChangeCategory = (category: number): void => {
    let categoryItem = document.getElementById(category.toString());
    categoryItem &&
      categoryItem.scrollIntoView({ behavior: "smooth", block: "start" });
    setSelected(category);
  };

  return (
    <Grid container spacing={2}>
      <Scrollspy sectionRefs={sectionRefs} offset={-100}>
        {({ currentElementIndexInViewport }) => (
          <>
            {console.log(
              "currentElementIndexInViewport",
              currentElementIndexInViewport
            )}
            <Grid item md={6} xs={4}>
              <List
                sx={{ border: `1px solid grey`, my: 2 }}
                dense
                disablePadding
                data-cy="nav-wrapper"
              >
                {map(categories, (category, index) => (
                  <React.Fragment key={category}>
                    <ListItem disablePadding data-cy={`nav-item`}>
                      <ListItemButton
                        selected={currentElementIndexInViewport === index}
                        onClick={() => handleChangeCategory(category)}
                      >
                        <ListItemText primary={category} />
                      </ListItemButton>
                    </ListItem>
                    <Divider />
                  </React.Fragment>
                ))}
              </List>
            </Grid>
            <Grid item md={6} xs={4}>
              <List
                sx={{
                  width: "100%",
                  bgcolor: "background.paper",
                  position: "relative",
                  overflow: "auto",
                  maxHeight: 300,
                  "& ul": { padding: 0 }
                }}
                subheader={<li />}
                data-cy="section-wrapper"
              >
                {categories.map((sectionId, sectionIndex) => (
                  <li key={`section-${sectionId}`} id={sectionId.toString()}>
                    <ul ref={sectionRefs[sectionIndex]}>
                      <ListSubheader>{`I'm sticky ${sectionId}`}</ListSubheader>
                      {[0, 1, 2].map((item) => (
                        <ListItem key={`item-${sectionId}-${item}`}>
                          <ListItemText primary={`Item ${item}`} />
                        </ListItem>
                      ))}
                    </ul>
                  </li>
                ))}
              </List>
            </Grid>
          </>
        )}
      </Scrollspy>
    </Grid>
  );
}

Stackblitz link: Link

Ahmet Emre Kilinc · Accepted Answer · 2022-09-30 20:55:57Z

1

You need to pass rootSelector prop to your Scrollspy component.

In order to do this, first, you can set a unique id to your List component like this:

<List
    sx={{
      width: "100%",
      bgcolor: "background.paper",
      position: "relative",
      overflow: "auto",
      maxHeight: 300,
      "& ul": { padding: 0 }
    }}
    subheader={<li />}
    data-cy="section-wrapper"
    id="my-list-root"
>

And then pass its querySelector string ("#my-list-root") to the Scrollspy like this:

<Scrollspy
    sectionRefs={sectionRefs}
    offset={-100}
    rootSelector="#my-list-root"
>

You can take a look at this sandbox for a live working example of this solution.

answered Sep 30, 2022 at 20:55

Ahmet Emre Kilinc

7,05119 gold badges37 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

arunmmanoharan Over a year ago

In this specific case, why does the selection default to the last value? codesandbox.io/s/scrollspy-root-selector-forked-h57igt?file=/…

Ahmet Emre Kilinc Over a year ago

Currently, your sandbox throws error includes is not defined.

arunmmanoharan Over a year ago

Sorry. codesandbox.io/s/scrollspy-root-selector-forked-h57igt?file=/…

Ahmet Emre Kilinc Over a year ago

Because the header and the content of the last value are visible. This component cannot work properly on such small data. Either you need to decrease the max height of the list, or increase the padding of the list items.

arunmmanoharan Over a year ago

Thanks. But the left panel should always target the top element of the list, right?

Collectives™ on Stack Overflow

Change selected button in a list on Material UI LIst Scroll - React

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related