Can't scroll menu items in selects.

[duvet86]

Expected Behavior

I have a select with a little bit more than 100 items. When I open it and I try to scroll the items with the mouse wheel it doesn't scroll I have to drag the scroll bar.
It works briefly if I quickly open the select and use the mouse wheel.
It appears the menu list is loosing focus after opening.

Current Behavior

The list should be scrollable when the select gets clicked.

Steps to Reproduce (for bugs)

The issue is present on the selects demo page. Try to open a multiselect and scroll the items.

Material UI: 1.0.0-beta.36
Chrome 65

[oliviertassinari]

@duvet86 Your issue has been closed because it does not conform to our issue requirements.
Please provide a full reproduction test case. This would help a lot 👷 .
A live example would be perfect. This codesandbox.io template may be a good starting point. Thank you!

[thegregthomp]

Is this ever going to get addressed? It's broken on the documentation website, i think that's about all the test case needed and looking back at past issues, it seems to be a long standing one.

[oliviertassinari]

@thegregthomp Do you have a reproduction example on v1-beta?

[thegregthomp]

@oliviertassinari I doesn't work on the website. Image and link provided. My guess is that this is chrome specific. I noticed it does scroll in responsive mode via 'touch' simulation and it also scrolls if I add overflow to the container

https://material-ui.com/demos/selects/

[oliviertassinari]

@thegregthomp You are right, I can reproduce the issue on https://material-ui.com/demos/selects/ with Chrome 65.
But I can't reproduce it on https://material-ui.com/demos/menus/#max-height-menus or with Safari and Firefox.

[oliviertassinari]

I have no clue around how to address this issue 🤔 .

[duvet86]

Ok, upon further investigation it is something to do with css and the page height.
At the beginning the whole page has a scroll bar but once you click on a select with a long list of options the page scroll bar disappears and you can't scroll the list. Even stranger is the fact that if you open the console the option list becomes scrollable.
All of this happening https://material-ui.com/demos/selects/ section Multiple Select, name select.
Cheers Luca

[eXamadeus]

@oliviertassinari I noticed something interesting when working with chrome and the broken lists on https://material-ui.com/demos/selects/. If you right click in the list once the scrolling stops, then hit escape to close the menu, scrolling works again. This is another odd way to make it start working again.

@duvet86's workaround is interesting as well. I wonder if the height is a red herring and it just has to do with element focus? Still not sure...

[philmill]

Has anyone tried updating to the latest beta-39 with the autofocus fix for Select included? I'm going to try it out but my app is a few beta versions behind and need to step through the breaking changes.
#10792

[darthneel]

Here is a workaround I am using which fixes the issue and supports the notion that the underlying problem is with focus.

<Select
  ...
  MenuProps={{
    onEnter: () => {
      setTimeout(() => {
        if (document.activeElement) {
          document.activeElement.blur();
        }
      }, 500);
    }   
  }}
>
  {children}
</Select>

[TheMoonDawg]

Thanks for the workaround darthneel! This does the trick for now.

[byoungb]

@darthneel 's workaround doesn't work for me. I am working with a Menu that has a fixed height. In my case I can get the scroll wheel to work if I click on the Menu or scroll with the scroll bar then things pretty much work correctly. I think at least in my case something is wrong with the backdrop. because if I delete the backdrop then I can scroll with the mouse wheel without any problems.

[alozionn]

@duvet86 the strange thing that the list becomes scrollable when you open the dev tools, is not ABOUT the dev tools is about swaping out of the window and back into it(try alt+tabbing to another window), maybe somehow sending the signal to focus when the window is shown again.

[FernandoGOT]

+1
The workaround worked for me, just add this to your TextField:

SelectProps={{
  MenuProps: {
    onEnter: () => {
      setTimeout(() => {
        if (document.activeElement) {
          document.activeElement.blur();
        }
      }, 500);
    }
  },
}}

[abukurov]

Another workaround based on CSS:

<Select
  ...
  MenuProps={{
    PaperProps: {
      style: {
        transform: 'translate3d(0, 0, 0)'
      } 
    }   
  }}
>
  {children}
</Select>

[duvet86]

@oliviertassinari so I had time to spend on this and the issue lies on the Backdrop component of the Modal.
I can't replicate it on code sandbox so I've pasted the code here.

const BackdropComponent = ({ onClick }) => {
  return (
    <div
      style={{
        top: 0,
        left: 0,
        width: "100%",
        height: "100%",
        zIndex: -1,
        position: "fixed"
      }}
      data-mui-test="luca"
      onClick={onClick}
      aria-hidden="true"
    />
  );
};

const IntervalTypeSelector = ({
  classes,
  intervalTypes,
  selectedIntervalType
}) => (
  <FormControl className={classes.formControl}>
    <InputLabel htmlFor="interval">Interval</InputLabel>
    <Select
      MenuProps={{
        BackdropComponent
      }}
      value={selectedIntervalType}
      onChange={this.handleChange}
      input={<Input name="interval" id="interval" />}
      autoWidth
    >
      {intervalTypes.map(({ IntervalType, Label }) => (
        <MenuItem key={IntervalType} value={IntervalType}>
          {Label}
        </MenuItem>
      ))}
    </Select>
  </FormControl>
);

Replacing the backdrop component with one without Fade and therefore without Transition fixes the issue.
I believe react-transition-group/Transition is real responsible.
I need to dig deeper.

Cheers

[hermanho]

Here is another example that I am not sure if it is related to the same issue.
https://codesandbox.io/s/74j6r40zvj

Chrome 66 ❌
Firefox 60 ✔️
Edge 42 ✔️

When I remove the "Tabs" component in demo.js , it works.
https://codesandbox.io/s/2x49zj50j

[cmosboss]

Note I also noticed this on the demo website under multiple select https://material-ui.com/demos/selects/

Something I noticed is that it depends on HOW you scroll. If you open the menu and scroll down no issue, if however you scroll down and then up again it (pretend you are scrolling passed the top) it will then not respond to downward scrolls for a long period. Not sure if this is fixed and the demo page just needs updating.

[stclairdaniel]

I am also having this issue and none of the above workarounds work - I can't scroll with the scrollwheel at all.

[ghost]

I'm seeing this in Chrome (not Safari) for a simple <List> of <ListItem> embedded in a <Popover>. It's definitely a focus issue, but since I'm not using a <Select>, I can't supply a MenuListProps prop to fix it.

Update: ah, but I can use "PaperProps" prop of the Popover:

PaperProps={{
  style: {
    transform: 'translate3d(0, 0, 0)',  // fixes a scroll issue: https://github.com/mui-org/material-ui/issues/10601
  },
}}

[asemoon]

I am seeing the same problem on chrome 67 while it works as expected in Firefox 60.
using @abukurov workaround, it fixed it on chrome.

[afilp]

Can @abukurov solution be included in the library core?

[oliviertassinari]

@afilp It's already here with #12003 thanks to @stephenway. What version are you using?

[afilp]

Thanks!

I am using the React Admin software which has MUI as a dependency:

https://github.com/marmelab/react-admin/blob/master/packages/ra-ui-materialui/package.json

[momguide]

Another workaround based on CSS:

<Select
  ...
  MenuProps={{
    PaperProps: {
      style: {
        transform: 'translate3d(0, 0, 0)'
      } 
    }   
  }}
>
  {children}
</Select>

if you want to create scoll, then
write code like:
MenuProps={{ PaperProps: { style: { maxHeight: '33%' } } }}
it works!