Preserve scroll position for st.selectbox and st.multiselect (#10073)

jrieke · sfc-gh-jrieke · web-flow · commit b743ac0e1aed · 2025-01-18T03:01:05.000Z
## Describe your changes When you click on a selectbox (or multiselect), scroll in the dropdown, then close it and click on the selectbox again, the dropdown opens at the top position. This can be annoying if the dropdown is large. With this PR, the dropdown will open at the same position where it was previously closed. Also, when the dropdown opens for the first time, it opens at the position of the selected default value. **Before:** https://github.com/user-attachments/assets/7b361fb1-0e0d-47db-b627-5391455a2228 **After:** https://github.com/user-attachments/assets/69ca577a-d78e-43fb-8a26-11ec56003638 ## GitHub Issue Link (if applicable) Closes #4901 ## Testing Plan - Added a JS unit test on the `Selectbox` component that simulates scrolling, closes the dropdown, and checks that it opens at the same position. - Did not add an e2e test because it would basically do the same thing and that feels a bit overkill. But I can add e2e test for `st.selectbox` and `st.multiselect` if we want to have them. --- **Contribution License Agreement** By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license. --------- Co-authored-by: Johannes Rieke <johannes.rieke@snowflake.com>
diff --git a/frontend/lib/src/components/shared/Dropdown/Selectbox.tsx b/frontend/lib/src/components/shared/Dropdown/Selectbox.tsx
@@ -35,6 +35,7 @@ import {
   WidgetLabel,
 } from "@streamlit/lib/src/components/widgets/BaseWidget"
 import { EmotionTheme } from "@streamlit/lib/src/theme"
+import { convertRemToPx } from "@streamlit/lib/src/theme/utils"
 
 const NO_OPTIONS_MSG = "No options to select."
 
@@ -91,6 +92,8 @@ const Selectbox: React.FC<Props> = ({
 }) => {
   const theme: EmotionTheme = useTheme()
   const [value, setValue] = useState<number | null>(propValue)
+  const [scrollPosition, setScrollPosition] = useState(0)
+  const [hasBeenScrolled, setHasBeenScrolled] = useState(false)
 
   // Update the value whenever the value provided by the props changes
   // TODO: Find a better way to handle this to prevent unneeded re-renders
@@ -150,6 +153,21 @@ const Selectbox: React.FC<Props> = ({
   // If that's true, we show the keyboard on mobile. If not, we hide it.
   const showKeyboardOnMobile = options.length > 10
 
+  const getDropdownInitialScrollPosition = useCallback(() => {
+    // If the dropdown has been manually scrolled before, open it at the position it
+    // was last scrolled to.
+    if (hasBeenScrolled) {
+      return scrollPosition
+    }
+
+    // If the dropdown has not been manually scrolled, open it at the position
+    // of the selected default value, or at the top if the default value is not set.
+    if (isNullOrUndefined(value)) {
+      return 0
+    }
+    return value * convertRemToPx(theme.sizes.dropdownItemHeight)
+  }, [value, hasBeenScrolled, scrollPosition, theme.sizes.dropdownItemHeight])
+
   return (
     <div className="stSelectbox" data-testid="stSelectbox" style={{ width }}>
       <WidgetLabel
@@ -181,7 +199,18 @@ const Selectbox: React.FC<Props> = ({
               lineHeight: theme.lineHeights.inputWidget,
             }),
           },
-          Dropdown: { component: VirtualDropdown },
+          Dropdown: {
+            component: VirtualDropdown,
+            props: {
+              $menuListProps: {
+                initialScrollOffset: getDropdownInitialScrollPosition(),
+                onScroll: (offset: number) => {
+                  setHasBeenScrolled(true)
+                  setScrollPosition(offset)
+                },
+              },
+            },
+          },
           ClearIcon: {
             props: {
               overrides: {
diff --git a/frontend/lib/src/components/shared/Dropdown/VirtualDropdown.tsx b/frontend/lib/src/components/shared/Dropdown/VirtualDropdown.tsx
@@ -59,6 +59,10 @@ function FixedSizeListItem(props: FixedSizeListItemProps): ReactElement {
 const VirtualDropdown = React.forwardRef<any, any>((props, ref) => {
   const theme = useTheme()
   const children = React.Children.toArray(props.children) as ReactElement[]
+  const listRef = React.useRef<FixedSizeList>(null)
+
+  // Get initial scroll offset from props
+  const initialScrollOffset = props.$menuListProps?.initialScrollOffset || 0
 
   if (!children[0] || !children[0].props.item) {
     const childrenProps = children[0] ? children[0].props : {}
@@ -112,6 +116,7 @@ const VirtualDropdown = React.forwardRef<any, any>((props, ref) => {
       data-testid="stSelectboxVirtualDropdown"
     >
       <FixedSizeList
+        ref={listRef}
         width="100%"
         height={height}
         itemCount={children.length}
@@ -120,6 +125,13 @@ const VirtualDropdown = React.forwardRef<any, any>((props, ref) => {
           data[index].props.item.value
         }
         itemSize={convertRemToPx(theme.sizes.dropdownItemHeight)}
+        initialScrollOffset={initialScrollOffset}
+        onScroll={({ scrollOffset }) => {
+          // Pass scroll position back through props
+          if (props.$menuListProps?.onScroll) {
+            props.$menuListProps.onScroll(scrollOffset)
+          }
+        }}
       >
         {FixedSizeListItem}
       </FixedSizeList>
diff --git a/frontend/lib/src/components/widgets/Multiselect/Multiselect.tsx b/frontend/lib/src/components/widgets/Multiselect/Multiselect.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { FC, memo, useCallback, useMemo } from "react"
+import React, { FC, memo, useCallback, useMemo, useState } from "react"
 
 import { ChevronDown } from "baseui/icon"
 import {
@@ -44,6 +44,7 @@ import {
   useBasicWidgetState,
   ValueWithSource,
 } from "@streamlit/lib/src/hooks/useBasicWidgetState"
+import { convertRemToPx } from "@streamlit/lib/src/theme/utils"
 
 export interface Props {
   disabled: boolean
@@ -208,6 +209,28 @@ const Multiselect: FC<Props> = props => {
   // If that's true, we show the keyboard on mobile. If not, we hide it.
   const showKeyboardOnMobile = options.length > 10
 
+  const [scrollPosition, setScrollPosition] = useState(0)
+  const [hasBeenScrolled, setHasBeenScrolled] = useState(false)
+
+  const getInitialScrollPosition = useCallback(() => {
+    // If the dropdown has been manually scrolled before, open it at the position it
+    // was last scrolled to.
+    if (hasBeenScrolled) {
+      return scrollPosition
+    }
+
+    // If the dropdown has not been manually scrolled, open it at the position
+    // of the (last) selected default value, or at the top if the default value is not
+    // set. Note that multiselect removes selected items from the dropdown, so this will
+    // actually show the next item in the list.
+    if (!value || value.length === 0) {
+      return 0
+    }
+    return (
+      value[value.length - 1] * convertRemToPx(theme.sizes.dropdownItemHeight)
+    )
+  }, [value, hasBeenScrolled, scrollPosition, theme.sizes.dropdownItemHeight])
+
   return (
     <div className="stMultiSelect" data-testid="stMultiSelect" style={style}>
       <WidgetLabel
@@ -387,7 +410,18 @@ const Multiselect: FC<Props> = props => {
                     : null,
               },
             },
-            Dropdown: { component: VirtualDropdown },
+            Dropdown: {
+              component: VirtualDropdown,
+              props: {
+                $menuListProps: {
+                  initialScrollOffset: getInitialScrollPosition(),
+                  onScroll: (offset: number) => {
+                    setHasBeenScrolled(true)
+                    setScrollPosition(offset)
+                  },
+                },
+              },
+            },
           }}
         />
       </StyledUISelect>
diff --git a/frontend/lib/src/components/widgets/Selectbox/Selectbox.test.tsx b/frontend/lib/src/components/widgets/Selectbox/Selectbox.test.tsx
@@ -17,6 +17,7 @@
 import React from "react"
 
 import { act, fireEvent, screen } from "@testing-library/react"
+import { userEvent } from "@testing-library/user-event"
 
 import { render } from "@streamlit/lib/src/test_util"
 import { WidgetStateManager } from "@streamlit/lib/src/WidgetStateManager"
@@ -47,11 +48,11 @@ const getProps = (
 })
 
 const pickOption = (selectbox: HTMLElement, value: string): void => {
-  // TODO: Utilize user-event instead of fireEvent
+  // TODO: Utilize userEvent instead of fireEvent. This somehow fails with userEvent.
   // eslint-disable-next-line testing-library/prefer-user-event
   fireEvent.click(selectbox)
   const valueElement = screen.getByText(value)
-  // TODO: Utilize user-event instead of fireEvent
+  // TODO: Utilize userEvent instead of fireEvent. This somehow fails with userEvent.
   // eslint-disable-next-line testing-library/prefer-user-event
   fireEvent.click(valueElement)
 }
@@ -153,4 +154,36 @@ describe("Selectbox widget", () => {
       undefined
     )
   })
+
+  it("maintains scroll position when reopening dropdown", async () => {
+    const user = userEvent.setup()
+    const props = getProps({
+      options: Array.from({ length: 100 }, (_, i) => `Option ${i}`),
+    })
+    vi.spyOn(Utils, "convertRemToPx").mockImplementation(mockConvertRemToPx)
+
+    render(<Selectbox {...props} />)
+    const selectbox = screen.getByRole("combobox")
+
+    // Open dropdown
+    await user.click(selectbox)
+
+    // Get dropdown content and scroll
+    const dropdown = screen.getByTestId("stSelectboxVirtualDropdown")
+    act(() => {
+      // Simulate scrolling down
+      const scrollEvent = new Event("scroll", { bubbles: true })
+      Object.defineProperty(dropdown, "scrollTop", { value: 500 })
+      dropdown.dispatchEvent(scrollEvent)
+    })
+
+    // Close dropdown
+    await user.keyboard("{Escape}")
+
+    // Reopen dropdown
+    await user.click(selectbox)
+
+    // Check if scroll position was maintained
+    expect(dropdown.scrollTop).toBe(500)
+  })
 })
