Material-ui: [AutoComplete] with 16.6 and 16.5 autocomplete overflow scrolls down but not up

[HenrikBechmann]

Problem description

Autocomplete dropdown overflow scrolls down but not up with v 16.6 and 16.5

That's a showstopper.

I've had to revert to v 16.4 to avoid the problem.

                <AutoComplete
                  style = {{width:'100%'}}
                  ref={'autocomplete'}
                  floatingLabelText="type in a key word, then select a list item"
                  filter={AutoComplete.caseInsensitiveFilter}
                  dataSource={this.findAspectChartLookups || []}
                  dataSourceConfig = {{text:'name',value:'value'}}
                  fullWidth = {true}
                  menuStyle = {{maxHeight:"300px"}}
                  openOnFocus = {false}
                  maxSearchResults = {60}
                  onNewRequest = {this.findOnNewRequest}
                  onUpdateInput = {this.findOnUpdateInput}
                />

Versions

• Material-UI: 16.6, 16.5, problem absent with 16.4
• React: 15.4
• Browser: Chrome (mac)

[oliviertassinari]

I'm not sure to understand where is the issue.
Could you provide a live reproduction test case? That would help a lot 👷 .
You can use this playground to do so: http://www.webpackbin.com/Vy6jAlXbG.

[HenrikBechmann]

You can't reproduce or you don't understand?

Quick try to clarify, in case it's the latter: With autocomplete if I type in a partial value to get the drop down (with item list still longer than the available space) I can scroll down with 16.6, but I can't scroll up. So I can scroll to the bottom of the list, but I can't scroll back to the top.

If you get an over-long list of autocomplete options with max height as I've set, you should be able to reproduce. (I'm presuming you have such a thing readily available).

Would you like a video of the problem? (it's really dead simple - can scroll down, but can't scroll up)

Another symptom: If I place the mouse over the slider of the dropdown, then scroll up works. But if I place the cursor over the body, then scroll up doesn't work. Apparently not listening to scroll up, or some side effect.

Learning the playground and reproducing there not really time I have at the moment...

[HenrikBechmann]

here's a video of the bug https://youtu.be/ejMddSAVeuw

lemme know when you're done and I'll take the video down.

Hope this helps

[oliviertassinari]

That regression is linked to https://github.com/callemall/material-ui/pull/4168.
In your case, it's the Popover shadow dom that handle the scroll instead of the Menu.
You need to set the overflowY: 'auto' or use the menuProps.maxHeight property.

[HenrikBechmann]

Excellent. Glad it's been clarified. Thanks for looking into it. I think I'll stick with 16.4 for a bit...

[oliviertassinari]

You are welcomed. I'm closing the issue. It's more like a breaking changes we haven't anticipated.

[HenrikBechmann]

@oliviertassinari to confirm I've added overflowY:'auto' to menuStyle, and that resolved the issue (can now scroll up as well as down). I already had maxHeight set, and that had not by itself resolved the problem. So now I have:

   menuStyle = {{maxHeight:"300px",overflowY:'auto'}}

I don't understand why you'd consider this a 'feature' though. The widget fails out of the box without this workaround, which I would think of as a bug.

IAC thanks for the help!

[oliviertassinari]

I already had maxHeight set

I was referring to the component property, not the CSS property. Use that one instead, it's much less likly to break.

I don't understand why you'd consider this a 'feature' though.

Because I don't think that we can fix that without introducing another breaking change.
When overriding component styles, everything may break.
There is no clear contract nor guarantee that the style override is going to behave the same way.