MUI Autocomplete + react-virtuoso + pagination

[denvudd]

Hello, thanks for this beautiful lib
I tried to implement virtualization for MUI Autocomplete with pagination (endReached). I created a simple component that fetches the list of countries and renders the react-virtuoso component as a Listbox component. It works, but when I scroll to the end and load more countries, the scroll position jumps to the top. I tested the same list outside of Autocomplete, and it worked fine. So, I guess the problem is in MUI Autocomplete itself.
So maybe someone encountered the same problem, or do you have any solutions for this problem?

2025-04-14.15-40-20.mp4

Component of virtualized list:

import { Box, CircularProgress, MenuItem } from "@mui/material";
import { forwardRef } from "react";
import { Virtuoso } from "react-virtuoso";

const VirtualizedSelectList = forwardRef(
  (

    {
      children,
      options,
      onItemClick,
      hasNextPage,
      handleEndReached,
      itemHeight = 32,
      ...other
    },
    ref
  ) => {
    return (
      <Virtuoso
        style={{ height: Math.min(options.length * itemHeight, 300) }}
        totalCount={options.length}
        {...other}
        increaseViewportBy={200}
        ref={ref}
        followOutput={true}
        endReached={handleEndReached}
        data={options}
        itemContent={(index) => {
          const option = options[index];

          return (
            <MenuItem
              value={option.value}
              key={option.value}
              onClick={() => onItemClick(option)}
              sx={{
                fontSize: "16px",
                fontFamily: "Poppins",
                color: "#121212",
                whiteSpace: "normal",
                wordBreak: "break-word",
                "&:hover": {
                  backgroundColor: "#F9F9F9",
                  color: "#0F2C5D",
                },
                "&.Mui-disabled": {
                  opacity: 0.5,
                },
              }}
            >
              {option.label}
            </MenuItem>
          );
        }}
        components={{
          Footer: () =>
            hasNextPage && (
              <Box
                sx={{
                  padding: "10px 0px",
                  display: "flex",
                  justifyContent: "center",
                  alignItems: "center",
                  width: "100%",
                }}
              >
                <CircularProgress size={20} />
              </Box>
            ),
        }}
      />
    );
  }
);

VirtualizedSelectList.displayName = "VirtualizedSelectList";

export default VirtualizedSelectList;

MUI Autocomplete + virtualized list

import { useEffect, useState, useCallback } from "react";
import { CircularProgress, FormControl, TextField } from "@mui/material";
import { useDebounce } from "usehooks-ts";
import { Clear } from "@mui/icons-material";

import { AutocompleteBox } from "./addressAutocompleteInput";
import VirtualizedSelectList from "./VirtualizedSelectList";
import { SVG } from "@assets/svg";

import { useGetCountriesQuery } from "@redux/services/choices";
import { createSelectOptions } from "@utils/createSelectOptions";

const COUNTRIES_LIMIT = 100;
const DEBOUNCE_DELAY = 300;

const CountrySelectInput = ({
  placeholder,
  disabled,
  onBlur,
  title,
  labelWeight,
  className,
  style,
  value,
  onChange,
  initialCountryName,
  ...rest
}) => {
  const [open, setOpen] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);
  const [countriesList, setCountriesList] = useState([]);
  const [hasNextPage, setHasNextPage] = useState(true);
  const [isLoadingMore, setIsLoadingMore] = useState(false);
  const [inputValue, setInputValue] = useState("");
  const [selectedCountry, setSelectedCountry] = useState(null);

  const debouncedSearchTerm = useDebounce(inputValue, DEBOUNCE_DELAY);

  const {
    data: countries,
    isLoading,
    isFetching,
  } = useGetCountriesQuery(
    {
      page: currentPage,
      limit: COUNTRIES_LIMIT,
      search: debouncedSearchTerm,
    },
    {
      refetchOnMountOrArgChange: true,
    }
  );

  useEffect(() => {
    if (debouncedSearchTerm) {
      setCurrentPage(1);
      setHasNextPage(true);
      setCountriesList([]);
    }
  }, [debouncedSearchTerm]);

  useEffect(() => {
    if (initialCountryName && value) {
      setInputValue(initialCountryName);
      setSelectedCountry({
        label: initialCountryName,
        value,
      });
      onChange(value);
    }
  }, [initialCountryName]);

  useEffect(() => {
    if (countries && !isLoading && !isFetching) {
      const newCountries = createSelectOptions(countries?.data || []);

      if (currentPage === 1) {
        setCountriesList(newCountries);
      } else {
        setCountriesList((prev) => {
          return [...prev, ...newCountries];
        });
      }

      setHasNextPage(!!countries.next);
      setIsLoadingMore(false);
    }
  }, [countries, isLoading, isFetching, currentPage]);

  const loadMore = useCallback(() => {
    if (hasNextPage && !isLoadingMore && !isFetching) {
      setIsLoadingMore(true);
      setCurrentPage((prev) => prev + 1);
    }
  }, [hasNextPage, isLoadingMore, isFetching]);

  const handleChange = (value, label) => {
    if (onChange) {
      onChange(value, label);
    }
  };

  const handleInputChange = (event, newValue) => {
    setInputValue(newValue);

    if (!newValue) {
      setSelectedCountry(null);
      if (onChange) {
        onChange("");
      }
    }
  };

  const handleItemClick = (option) => {
    handleChange(option.value, option.label);
    setOpen(false);
  };

  const findCountryByValue = useCallback(
    (cityValue) => {
      if (!cityValue) return null;
      return countriesList.find((city) => city.value === cityValue) || null;
    },
    [countriesList]
  );

  useEffect(() => {
    if (value) {
      const countryObject = findCountryByValue(value);

      if (countryObject) {
        setSelectedCountry(countryObject);
        setInputValue(countryObject.label || "");
      }
    }
  }, [value, findCountryByValue, countriesList]);

  return (
    <>
      {title && (
        <label
          className="d-inline-block"
          style={{
            fontWeight: labelWeight,
            fontFamily: "Poppins",
            lineHeight: "24px",
            marginBottom: "10px",
          }}
        >
          {title}
        </label>
      )}
      <FormControl
        className={`iconsize-select ${className}`}
        sx={{
          "&.MuiSelect-select": {
            fontFamily: "Poppins",
            fontSize: "12px",
            color: "#121212",
            opacity: disabled ? "0.5" : "1",
          },
        }}
        size="small"
        fullWidth
        disabled={disabled}
        style={style || {}}
      >
        <AutocompleteBox
          id="countries-autocomplete"
          open={open}
          onOpen={() => setOpen(true)}
          onClose={() => setOpen(false)}
          inputValue={inputValue}
          value={selectedCountry}
          disabled={disabled || isLoading}
          onInputChange={handleInputChange}
          options={countriesList || []}
          getOptionLabel={(option) => option.label || ""}
          isOptionEqualToValue={(option, value) => {
            if (!option || !value) return false;
            return option.value === value.value;
          }}
          loading={isLoading}
          filterOptions={(x) => x}
          noOptionsText="No countries found"
          autoComplete
          clearIcon={isLoading ? null : <Clear fontSize="small" />}
          includeInputInList
          clearOnBlur={false}
          popupIcon={<SVG.arrowDown />}
          onBlur={onBlur}
          IconComponent={SVG.arrowDown}
          disableListWrap
          renderInput={(params) => (
            <TextField
              {...params}
              placeholder={placeholder}
              variant="outlined"
              fullWidth
              InputProps={{
                ...params.InputProps,
                endAdornment: (
                  <>
                    {isLoading && (
                      <CircularProgress
                        color="inherit"
                        size={16}
                        sx={{
                          position: "absolute",
                          top: "16px",
                          right: "31px",
                        }}
                      />
                    )}
                    {params.InputProps.endAdornment}
                  </>
                ),
              }}
            />
          )}
          ListboxComponent={(props) => (
            <VirtualizedSelectList
              {...props}
              hasNextPage={hasNextPage}
              handleEndReached={loadMore}
              onItemClick={handleItemClick}
              options={countriesList}
            />
          )}
          {...rest}
        />
      </FormControl>
    </>
  );
};

export default CountrySelectInput;