[Autocomplete] - Passing props to ListboxComponent

Not sure if this is a bug or not.

I am trying to fetch more options when ListboxComponent scroll is at the bottom. Having issues with the custom ListboxComponent.

When I pass props I get a fowardRef warning and the list items won’t render correctly even tho fowardRef was used.

      ListboxComponent={listboxProps => (
        <ListboxComponent
          {...listboxProps}
          setIsScrollBottom={setIsScrollBottom}
        />
      )}

const ListboxComponent = forwardRef(function ListboxComponent({ setIsScrollBottom, ...rest }, ref) {
  return (
    <ul
      ref={ref}
      {...rest}
      onScroll={({ target }) =>
        setIsScrollBottom(target.scrollHeight - target.scrollTop === target.clientHeight)
      }
    />
  );
});

Demo https://codesandbox.io/s/jolly-matsumoto-ugs5d

Issue Analytics

State:
Created 4 years ago
Reactions:6
Comments:19 (15 by maintainers)

Top GitHub Comments

1reaction

WasiakSzymoncommented, Dec 14, 2021

After X long hours spent on trying do ‘hacks’ with scroll/fix warning type listBoxComponent props i couldn’t find any working way do handle that… the way which i’ve chosen is to use hook useAutocomplete and provide custom list box build based on material-ui components like <Typography component='li' /> (i wanted have the same style/look like material-ui autocomplete)

there is a good example (easy to convert to TypeScript) https://codesandbox.io/s/material-demo-0fbyb?file=/demo.js

in my case i only imported getRootProps( for parent div), getInputProps( for inputProps TextField) and everything works

1reaction

RustamYcommented, Nov 22, 2021

@ChrisWiles have you find a way to prevent the “jump to start” scrolling glitch? Hi, maybe:

ListboxProps={{
   onScroll: (event: React.SyntheticEvent) => {
      event.stopPropagation();
      const listboxNode = event.currentTarget;
      const savedScrollTop = listboxNode.scrollTop;
      const diff = Math.round(
         listboxNode.scrollHeight - savedScrollTop,
      );
      if (diff - 25 <= listboxNode.clientHeight) {
         const returnScrollTop = () => {
            setTimeout(() => {
               listboxNode.scrollTop = savedScrollTop;
            }, 0);
         };
         getData(returnScrollTop);
      }
   },
}}