Compatibility issue with react-custom-scrollbars

Trying to use react-custom-scrollbars inside a custom MenuList component makes the keyboard navigation of react-select break.

Example:

// CustomMenuList.tsx
import React from "react";
import { components } from "react-select";
import { Scrollbars } from "react-custom-scrollbars";
import styled from "styled-components";

export const MenuList = (props: any) => {
  return (
    <components.MenuList {...props}>
      <div style={{ height: 200 }}>
        <Scrollbars>
          {props.children}
        </Scrollbars>
      </div>
    </components.MenuList>
  );
};

// App.tsx
<Select 
  components={{ MenuList }}
  captureMenuScroll={false} // custom scrollbar doesn't scroll if this is true
/>

With the above code, the dropdown list no longer scrolls to the focused option when trying to navigate using the keyboard arrow keys. However, if we remove the <Scrollbars> component, then the keyboard navigation works as expected and the menu starts scrolling as we press the down arrow key repeatedly.

[Rall3n]

@cseas @kabdelkareem

The Select component requires a ref to the scrollable container of the options list to scroll to the focused option. The MenuList component receives for this the innerRef prop.

But we can´t just simply set the ref prop on the Scrollbars component, because this would be a reference to the component, not the actual DOM element.

For this we would have to do as follows:

const MenuList = ({ children, innerRef, ...props }) => {
  const intermediateRef = React.useRef();

  React.useEffect(() => {
    innerRef(intermediateRef.current ? intermediateRef.current.view : null);
  }, [innerRef, intermediateRef]);

  return (
    <components.MenuList {...props}>
      <div style={{ height: 200 }}>
        <Scrollbars ref={intermediateRef}>{children}</Scrollbars>
      </div>
    </components.MenuList>
  );
};

At first we need the reference to the Scrollbars component. It contains a reference to the needed DOM element. Then as soon as the reference exists we set the reference to the scrolling DOM element as our innerRef reference.

[kabdelkareem]

@cseas I have tried it and it is working. thanks @Rall3n