Merge pull request #5314 from Textualize/select-highlight

fix select highlight

Author: willmcgugan

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## Unreleased
+
+## Changed
+
+- Fixed Select not scrolling highlight in to view when clicked https://github.com/Textualize/textual/issues/5255
+
 ## [0.88.1] - 2024-11-30
 
 ### Fixed

src/textual/widgets/_option_list.py

@@ -195,7 +195,7 @@ class OptionList(ScrollView, can_focus=True):
     | `option-list--separator` | Target the separators. |
     """
 
-    highlighted: reactive[int | None] = reactive["int | None"](None)
+    highlighted: reactive[int | None] = reactive(None)
     """The index of the currently-highlighted option, or `None` if no option is highlighted."""
 
     class OptionMessage(Message):
@@ -880,6 +880,7 @@ def scroll_to_highlight(self, top: bool = False) -> None:
             top: Scroll highlight to top of the list.
         """
         highlighted = self.highlighted
+
         if highlighted is None or not self.is_mounted:
             return
 
@@ -901,6 +902,10 @@ def scroll_to_highlight(self, top: bool = False) -> None:
             immediate=True,
         )
 
+    def on_show(self) -> None:
+        if self.highlighted is not None:
+            self.scroll_to_highlight()
+
     def validate_highlighted(self, highlighted: int | None) -> int | None:
         """Validate the `highlighted` property value on access."""
         if highlighted is None or not self._options:

src/textual/widgets/_select.py

@@ -414,7 +414,7 @@ def _setup_variables_for_options(
 
     def _setup_options_renderables(self) -> None:
         """Sets up the `Option` renderables associated with the `Select` options."""
-        self._select_options: list[Option] = [
+        options: list[Option] = [
             (
                 Option(Text(self.prompt, style="dim"))
                 if value == self.BLANK
@@ -425,7 +425,7 @@ def _setup_options_renderables(self) -> None:
 
         option_list = self.query_one(SelectOverlay)
         option_list.clear_options()
-        option_list.add_options(self._select_options)
+        option_list.add_options(options)
 
     def _init_selected_option(self, hint: SelectType | NoSelection = BLANK) -> None:
         """Initialises the selected option for the `Select`."""

tests/snapshot_tests/__snapshots__/test_snapshots/test_select_width_auto.svg

@@ -2744,7 +2744,7 @@ def compose(self) -> ComposeResult:
             yield Select(
                 [("Extra long option here", 100)]
                 + [(f"Option {idx + 1}", idx) for idx in range(100)],
-                value=25,
+                value=100,
             )
 
     async def run_before(pilot: Pilot) -> None:
@@ -2841,3 +2841,20 @@ def action_add_pane(self) -> None:
             tabbed_content.add_pane(new_pane)
 
     snap_compare(ExampleApp(), press=["a", "r", "a"])
+
+
+def test_click_expand(snap_compare):
+    """Should show an expanded select with 15 highlighted."""
+
+    class SelectApp(App):
+        def compose(self) -> ComposeResult:
+            yield Select.from_values(
+                range(20),
+                value=15,
+            )
+
+    async def run_before(pilot: Pilot) -> None:
+        await pilot.pause()
+        await pilot.click(Select)
+
+    snap_compare(SelectApp(), run_before=run_before)