CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
Asik
Asik

Reputation: 22133

How to get an "option focused" event with Material-UI's Autocomplete?

This is about Material-UI's Autocomplete. I need an event telling me which autocomplete choice the user is currently focusing, either by hovering the mouse over the option, or using keyboard arrows (i.e., before he actually clicks it or presses Enter). I tried a bunch of things, this seemed like it should work but the event does not trigger:

<Autocomplete
  renderOption={option => (
    <div onFocus={() => console.log('option onFocus')}>{option}</div>
  )}/>

How would you go about doing this?

Upvotes: 0

Views: 726

Answers (2)

Eran
Eran

Reputation: 360

use onHighlightChange to trigger a custom function whenever an option is highlighted

Upvotes: 0

keikai
keikai

Reputation: 15146

You can use the onMouseOver to achieve the hovering the mouse over the option

renderOption={(option, { selected }) => (
  <>
    <div onMouseOver={() => {console.log(option.name)}}>
      {option.name}
    ...

enter image description here

Try it online: https://stackblitz.com/edit/fvvowt-e4cwgb
which is a direct fork from the official demo in their document.

Upvotes: 2

Related Questions