React Material UI Autocmplete，React-window 在列表顶部重新渲染

Question

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

Answer 1

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);
}, []);