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

[niravhalbe]

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.

[EverettQuebral]

Having the same issue here

[jwrlee88]

Same Issue here. Following for solution.

[o-faro]

Having the same problem I found this one - it did not solve my problem, but may be it will help you https://github.com/moroshko/react-autosuggest/issues/361

[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}
  />

[nkov]

I was experiencing this issue due to a custom container component in renderSuggestionsContainer. Removing this prop fixed the issue for me.

[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