I'm having some trouble understanding how I'm supposed to detect a scroll event with a Select ponent 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 :

Could someone help me please?

I'm having some trouble understanding how I'm supposed to detect a scroll event with a Select ponent 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/autoplete-not-scrolling-example-k5ltg

Could someone help me please?

• javascript
• reactjs
• typescript
• react-hooks
• material-ui

• I think the main issue is that it refers to the select input itself if Im not mistaken material ui shows a div with a List and list items as the dropdown, seperate from the dropdown input itself. So Im not sure the onScroll will work as expected. Also if you test the onlick it is applied only to the select input field itself – Michael Commented Mar 31, 2021 at 13:35

1 Answer 1

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

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

Live Demo