Select field in Material-UI onMenuScrollToBottom property

I’m using select field from Material-UI and I want when I scroll to the bottom of the menu to call an API to append some new options.

In react-select library there is a onMenuScrollToBottom property which is used for this reason but in the Material-UI select field I don’t see such a prop. Do you know how can I implement this functionality? I’m using import { SelectField } from 'redux-form-material-ui';

Thanks

Answer

MUI Select does not have onMenuScrollToBottom props, but you can listen to the scroll event and detect when the the user reaches the bottom using this simple code:

<Select
  MenuProps={{
    PaperProps: {
      onScroll: (event) => {
        const listEl = event.currentTarget;
        if (
          listEl.scrollTop + listEl.clientHeight >=
          listEl.scrollHeight
        ) {
          console.log("scroll to bottom!");
        }
      }
    }
  }}
  {...props}
>

Live Demo

Edit 67090527/select-field-in-material-ui-onmenuscrolltobottom-property