-
Notifications
You must be signed in to change notification settings - Fork 4.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Compatibility issue with react-custom-scrollbars #4227
Comments
I am facing the same issue using version in package.json |
The But we can´t just simply set the 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 |
Greetings @cseas @kabdelkareem, Can you confirm that the above solution works for you and if so close the ticket? |
My team figured that a custom JavaScript scrollbar isn't the best idea and we'd like to use the native one. So we just added the following styles to "::-webkit-scrollbar": {
width: "0.6rem",
},
"::-webkit-scrollbar-track": {
background: "rgba(0, 0, 0, 0)", // transparent
borderRadius: "1rem",
},
"::-webkit-scrollbar-thumb": {
background: state.theme.colors.primary25,
borderRadius: "1rem",
boxShadow: "inset 0 0 0.6rem rgba(0, 0, 0, 0.2)",
},
"::-webkit-scrollbar-thumb:hover": {
background: Color.silver,
} Full example here. Maybe @kabdelkareem can confirm whether the above solution using |
Trying to use
react-custom-scrollbars
inside a customMenuList
component makes the keyboard navigation ofreact-select
break.Example:
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.The text was updated successfully, but these errors were encountered: