React Material-UI Select not detecting scroll event

Question

I'm having some trouble understanding how I'm supposed to detect a scroll event with a Select component using Material-UI.

I have a Select that has MenuProps={...}. I want to be able to listen to the scroll event inside this Select, so what I'm doing is putting onScroll inside the MenuProps={...}. But the event is never fired.

What I've already tried:

• Putting an overflow: 'auto' next to the style object in MenuProps={...}. It results in the list blinking for a second (on top of the Select instead of the bottom) and disappearing.
• What I have actually is looking like this : https://codesandbox.io/s/autocomplete-not-scrolling-example-k5ltg

Could someone help me please?

Answer 1

After digging in the Material-UI source code, I've found that you need to attach the scroll listener to the Paper component, so this is the working code:

MenuProps={{
  PaperProps: {
    onScroll: (event: any) => {
      console.log(event);
      console.log("we scroll");
    }
  },
}}

Live Demo