React material autosuggest scrollbar not working on up and down arrow keys

Bug

• StackBlitz URL.

• Steps to reproduce

  1. Focus on the input field
  2. Type a, and wait for suggestions to appear
  3. Press Up/Down arrow key to navigate through the suggestions

  Observed behavior: Suggestions get highlighted on pressing up/down keys (working as expected). But, the scrollbar remains at the top.

Expected behavior: Scrollbar should move according to the highlighted suggestion.

[bdmason]

I had this too. This was the best workaround I could come up with:

const Suggestion = ({ isHighlighted, text }) => {
  const itemEl = useRef(null)
  const [bottomRef, bottomInView] = useInView() // from react-intersection-observer
  const [topRef, topInView] = useInView()

  useEffect(() => {
    if (isHighlighted && !bottomInView) {
      itemEl.current.scrollIntoView({ behavior: 'smooth', block: 'end' })
    } else if (isHighlighted && !topInView) {
      itemEl.current.scrollIntoView({ behavior: 'smooth', block: 'start' })
    }
  }, [isHighlighted])

  return (
    <div ref={itemEl}>
      <div ref={topRef} />
        <MenuItem selected={isHighlighted} component="span">
          {text}
        </MenuItem>
      <div ref={bottomRef} />
    </div>
  )
}

const renderSuggestion = (suggestion, { query, isHighlighted }) =>
  <Suggestion
    isHighlighted={isHighlighted}
    text={suggestion.text}
  />

[JordanDDisch]

This was a css issue for me that was fixed by moving the position: absolute; overflow-y: auto; and other custom dropdown styling from the ‘ul’ class to the results container opened class react-autosuggest__suggestions-container--open.

See this example: https://codepen.io/moroshko/pen/XRgbxR?editors=0110