diff --git a/src/MenuList.tsx b/src/MenuList.tsx index 350928a..0eece20 100644 --- a/src/MenuList.tsx +++ b/src/MenuList.tsx @@ -92,6 +92,7 @@ function MenuList (props) { const { classNamePrefix, isMulti } = selectProps || {}; const list = React.useRef(null); + const scrollOffsetRef = React.useRef(0); React.useEffect( () => { @@ -120,10 +121,16 @@ function MenuList (props) { React.useEffect( () => { /** - * enables scrolling on key down arrow + * For multi-select, preserve the scroll position when options are + * selected/deselected so the menu doesn't jump back to the top. + * For single-select, scroll to the focused item on keyboard navigation. */ - if (currentIndex >= 0 && list.current !== null) { - list.current.scrollToItem(currentIndex); + if (list.current !== null) { + if (isMulti && scrollOffsetRef.current > 0) { + list.current.scrollTo(scrollOffsetRef.current); + } else if (currentIndex >= 0) { + list.current.scrollToItem(currentIndex); + } } }, [currentIndex, children, list] @@ -151,6 +158,7 @@ function MenuList (props) { itemCount={itemCount} itemData={children} itemSize={index => measuredHeights[index] || heights[index]} + onScroll={({ scrollOffset }) => { scrollOffsetRef.current = scrollOffset; }} > {({ data, index, style}: ListChildProps) => { return (