Search code examples
reactjsmaterial-uidownshift

Downshift + react-window + material-ui


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

Solution

  • 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.