0

I have recently started learning React and could use any help.

I am having an issue with the Material-ui autocomplete component. Need some real React gurus to figure this one out. The problem I am having is that when I select an option from the autocomplete drop down it resets to the top of the list. I am using react-window because the list is over 300 elements. The ingredient filter is the one that I am trying to fix, the other filters work fine. I have created code sandboxes that demonstrate what should happen and what is currently happening. I have messed around with React.memo but that does not have any affect on it. Please let me know if you have any ideas. The correct sandbox is from the material-ui site: autcomplete component

Correct: correct sandbox

correct gif

Issue: issue sandbox

issue gif

Please let me know if you need any clarification

William Redmond
  • 1
  • 1

1 Answers1

0

I had to use useCallback on ListboxComponent, please try now. Link to code: https://codesandbox.io/s/material-demo-33l5y?file=/demo.js:11315-11331

Old answer:

Seems like when we call setIngredients it is re-rendering the component and causes the list to jump to top, memoizing the handleIngredients function seems to fix it.

const handleIngredients = React.useMemo((event, value) => {
  setIngredients(value);
}, []);
Akash Agarwal
  • 384
  • 3
  • 3
  • That changes fixes but the problem with the list not scrolling to the top but now setIngredients is not called anymore: [Link with change](https://codesandbox.io/s/material-demo-j2wzg?file=/demo.js:9068-9081) – William Redmond Jun 03 '20 at 19:35