Add scrollbar support to UIDropdown

The dropdown menu now wraps options in a UIScrollArea with a UIScrollBar,
preventing the menu from extending beyond the window when there are many
options. A new max_height parameter (default 200px) controls when
scrolling activates.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: benjamin-kirkbride

arcade/gui/widgets/dropdown.py

@@ -8,19 +8,51 @@
 from arcade.gui.events import UIControllerButtonPressEvent, UIOnChangeEvent, UIOnClickEvent
 from arcade.gui.experimental import UIScrollArea
 from arcade.gui.experimental.focus import UIFocusMixin
+from arcade.gui.experimental.scroll_area import UIScrollBar
 from arcade.gui.ui_manager import UIManager
 from arcade.gui.widgets import UILayout, UIWidget
 from arcade.gui.widgets.buttons import UIFlatButton
 from arcade.gui.widgets.layout import UIBoxLayout
 
 
 class _UIDropdownOverlay(UIFocusMixin, UIBoxLayout):
-    """Represents the dropdown options overlay.
+    """Represents the dropdown options overlay with scroll support.
 
-    Currently only handles closing the overlay when clicked outside of the options.
+    Contains a UIScrollArea with the option buttons and a UIScrollBar
+    for navigating when options exceed the maximum height.
     """
 
-    # TODO move also options logic to this class
+    SCROLL_BAR_WIDTH = 15
+
+    def __init__(self, max_height: float = 200):
+        # Horizontal layout: [scroll_area | scroll_bar]
+        super().__init__(vertical=False, align="top", size_hint=(0, 0))
+        self._max_height = max_height
+
+        self._options_layout = UIBoxLayout(size_hint=(1, 0))
+        self._scroll_area = UIScrollArea(
+            width=100,
+            height=100,
+            canvas_size=(100, 100),
+            size_hint=(1, 1),
+        )
+        self._scroll_area.add(self._options_layout)
+
+        self._scroll_bar = UIScrollBar(self._scroll_area, vertical=True)
+        self._scroll_bar.size_hint = (None, 1)
+        self._scroll_bar.rect = self._scroll_bar.rect.resize(width=self.SCROLL_BAR_WIDTH)
+
+        super().add(self._scroll_area)
+        super().add(self._scroll_bar)
+
+    def add_option(self, widget: UIWidget) -> UIWidget:
+        """Add an option widget to the options layout."""
+        return self._options_layout.add(widget)
+
+    def clear_options(self):
+        """Clear all options and reset scroll position."""
+        self._options_layout.clear()
+        self._scroll_area.scroll_y = 0
 
     def show(self, manager: UIManager | UIScrollArea):
         manager.add(self, layer=UIManager.OVERLAY_LAYER)
@@ -67,6 +99,7 @@ def on_change(event: UIOnChangeEvent):
         height: Height of each of the option.
         default: The default value shown.
         options: The options displayed when the layout is clicked.
+        max_height: Maximum height of the dropdown menu before scrolling is enabled.
         primary_style: The style of the primary button.
         dropdown_style: The style of the buttons in the dropdown.
         active_style: The style of the dropdown button, which represents the active option.
@@ -120,6 +153,7 @@ def __init__(
         height: float = 30,
         default: str | None = None,
         options: list[str | None] | None = None,
+        max_height: float = 200,
         primary_style=None,
         dropdown_style=None,
         active_style=None,
@@ -150,7 +184,7 @@ def __init__(
         )
         self._default_button.on_click = self._on_button_click  # type: ignore
 
-        self._overlay = _UIDropdownOverlay()
+        self._overlay = _UIDropdownOverlay(max_height=max_height)
         self._update_options()
 
         # add children after super class setup
@@ -176,16 +210,16 @@ def value(self, value: str | None):
 
     def _update_options(self):
         # generate options
-        self._overlay.clear()
+        self._overlay.clear_options()
 
         for option in self._options:
             if option is None:  # None = UIDropdown.DIVIDER, required by pyright
-                self._overlay.add(
+                self._overlay.add_option(
                     UIWidget(width=self.width, height=2).with_background(color=arcade.color.GRAY)
                 )
                 continue
             else:
-                button = self._overlay.add(
+                button = self._overlay.add_option(
                     UIFlatButton(
                         text=option,
                         width=self.width,
@@ -225,13 +259,22 @@ def do_layout(self):
         but is required for the dropdown."""
         self._default_button.rect = self.rect
 
-        # resize layout to contain widgets
-        overlay = self._overlay
-        rect = overlay.rect
-        if overlay.size_hint_min is not None:
-            rect = rect.resize(*overlay.size_hint_min)
+        # Calculate total options height
+        total_h = 0
+        for option in self._options:
+            total_h += 2 if option is None else self.height
 
-        self._overlay.rect = rect.align_top(self.bottom - 2).align_left(self._default_button.left)
+        # Cap at max_height
+        overlay = self._overlay
+        visible_h = min(total_h, overlay._max_height) if total_h > 0 else self.height
+        overlay_w = self.width + _UIDropdownOverlay.SCROLL_BAR_WIDTH
+
+        overlay.rect = (
+            overlay.rect
+            .resize(overlay_w, visible_h)
+            .align_top(self.bottom - 2)
+            .align_left(self._default_button.left)
+        )
 
     def on_change(self, event: UIOnChangeEvent):
         """To be implemented by the user, triggered when the current selected value