How to integrate react-perfect-scrollbar with react-select

Question

I want to apply style to scrollbar, scrollbar style works perfectly in chrome using css. but does not work in Firefox and Iexplore.

Hence I opted to perfect-scroll-bar, But scrollbar does not move as expected if we navigate options using arrow keys, scroll position does not change.

Below is the demo link:
https://codesandbox.io/s/18pvjy0olj

Thanks in advance!

score 1 · Answer 1 · answered Feb 19 '19 at 15:56

Basically you need to use MenuList component and wrap children with perfect scroll bar :

function MenuList(props) {
  return (
    <div className={props.selectProps.classes.menuList}>
      <PerfectScrollbar>{props.children}</PerfectScrollbar>
    </div>
  );
}

Also, don't forget to setup a height property to parent container :

  menuList: {
    height:300
  }

And update components object

const components = {
  Control,
  Menu,
  MenuList, // here
  MultiValue,
  NoOptionsMessage,
  Option,
  Placeholder,
  SingleValue,
  ValueContainer
};

I made an update on your example : https://codesandbox.io/s/n5pmxp57n0

score 1 · Answer 2 · answered May 27 '21 at 20:57

You need to set Scrollbar into MenuProps something like...

import { InputLabel, MenuItem, FormControl as MuiFormControl, Select as MuiSelect } from "@material-ui/core";
import PerfectScrollbar from "react-perfect-scrollbar";
import "../vendor/perfect-scrollbar.css";

import { spacing } from "@material-ui/system";

const Scrollbar = styled(PerfectScrollbar)`
    height: 300px;
`;

const FormControlSpacing = styled(MuiFormControl)(spacing);
const FormControl = styled(FormControlSpacing)`
   min-width: 200px;
`;

const Select = styled(MuiSelect)(spacing);
const MenuProps = {
   MenuListProps: {
      component: Scrollbar,
   },
};

return (
    <React.Fragment>
        <FormControl variant="outlined" m={3}>
            <InputLabel id="select-label" shrink>SELECT LIST</InputLabel>
            <Select
               ...
               MenuProps={MenuProps}
            >
                {selectList.map((item) => (
                    <MenuItem key={item.value} value={item.value}>{item.text}</MenuItem>
                ))}
            </Select>
        </FormControl
    </React.Fragment>
)

Astrid Morales · Answer 3 · 2020-12-24T10:51:35.957

Just an improvement to @Alexandre answer for automatic height when scrolling is not needed.

Example: when the users start typing in select and options are reduced to one or two only

Instead of 7 for comparing props.children.length, just use the total number of options that are visible when the scrollbar is visible.

function MenuList(props) {
   return (
     <div style={{height: props.children.length >= 7 ? 300 : "unset"}}>
        <PerfectScrollbar>{props.children}</PerfectScrollbar>
     </div>
      );
}

How to integrate react-perfect-scrollbar with react-select

3 Answers3