EDIT: I strongly recommend using the new Autocomplete that has a multitude of options and works very well instead of integrating Downshift manually.
I've tried to adapt this downshift example (other-examples/react-window
) to work with material-ui components.
I've tried several options in my local environment but it breaks the rendering when scrolling or navigating the results with the keyboard. I've forked the codesandbox here. The only code I've adapted is the ItemRenderer
function, changing the original Item
by ListItem
or MenuItem
but the result is the same. I also adapted FixedSizeList's itemSize
to 46
to match the material-ui component height, but it doesn't fix anything.
I don't quite understand why the material-ui list example works with react-window but it breaks with downshift.
Any help would be appreciated :)
Versions used:
@material-ui/core: 3.9.3
downshift: 3.1.8
react-window: 1.8.1
Ok, found it, I missed the style={this.props.style}
that was passed to the ListItem
component in the material-ui example and apparently that was breaking everything...
I adapted the whole example with material-ui components, in case it's useful to someone.