menu: Add scrollable support to menu.

crates/story/src/popup_story.rs

@@ -1,8 +1,8 @@
 use gpui::{
     actions, div, impl_actions, px, AnchorCorner, AppContext, DismissEvent, Element, EventEmitter,
     FocusHandle, FocusableView, InteractiveElement, IntoElement, KeyBinding, MouseButton,
-    MouseDownEvent, ParentElement as _, Render, Styled as _, View, ViewContext, VisualContext,
-    WindowContext,
+    MouseDownEvent, ParentElement as _, Render, SharedString, Styled as _, View, ViewContext,
+    VisualContext, WindowContext,
 };
 use serde::Deserialize;
 use ui::{
@@ -289,6 +289,20 @@ impl Render for PopupStory {
                                     })
                             }),
                     )
+                    .child(
+                        Button::new("popup-menu-11112")
+                            .label("Scrollable Menu")
+                            .popup_menu(move |this, _| {
+                                let mut this = this.scrollable();
+                                for i in 0..100 {
+                                    this = this.menu(
+                                        SharedString::from(format!("Item {}", i)),
+                                        Box::new(Info(i)),
+                                    )
+                                }
+                                this
+                            }),
+                    )
                     .child(self.message.clone()),
             )
             .child("Right click to open ContextMenu")

crates/ui/src/button.rs

@@ -273,6 +273,10 @@ impl Disableable for Button {
 }
 
 impl Selectable for Button {
+    fn element_id(&self) -> &ElementId {
+        &self.id
+    }
+
     fn selected(mut self, selected: bool) -> Self {
         self.selected = selected;
         self
@@ -305,6 +309,12 @@ impl ParentElement for Button {
     }
 }
 
+impl InteractiveElement for Button {
+    fn interactivity(&mut self) -> &mut gpui::Interactivity {
+        self.base.interactivity()
+    }
+}
+
 impl RenderOnce for Button {
     fn render(self, cx: &mut WindowContext) -> impl IntoElement {
         let style: ButtonStyle = self.style;

crates/ui/src/checkbox.rs

@@ -54,6 +54,10 @@ impl Disableable for Checkbox {
 }
 
 impl Selectable for Checkbox {
+    fn element_id(&self) -> &ElementId {
+        &self.id
+    }
+
     fn selected(self, selected: bool) -> Self {
         self.checked(selected)
     }

crates/ui/src/list/list_item.rs

@@ -9,6 +9,7 @@ use crate::{h_flex, theme::ActiveTheme, Disableable, Icon, IconName, Selectable,
 
 #[derive(IntoElement)]
 pub struct ListItem {
+    id: ElementId,
     base: Stateful<Div>,
     disabled: bool,
     selected: bool,
@@ -23,8 +24,10 @@ pub struct ListItem {
 
 impl ListItem {
     pub fn new(id: impl Into<ElementId>) -> Self {
+        let id: ElementId = id.into();
         Self {
-            base: h_flex().id(id.into()).gap_x_1().py_1().px_2().text_base(),
+            id: id.clone(),
+            base: h_flex().id(id).gap_x_1().py_1().px_2().text_base(),
             disabled: false,
             selected: false,
             confirmed: false,
@@ -98,6 +101,10 @@ impl Disableable for ListItem {
 }
 
 impl Selectable for ListItem {
+    fn element_id(&self) -> &ElementId {
+        &self.id
+    }
+
     fn selected(mut self, selected: bool) -> Self {
         self.selected = selected;
         self

crates/ui/src/popover.rs

@@ -3,7 +3,7 @@ use gpui::{
     AppContext, Bounds, DismissEvent, DispatchPhase, Element, ElementId, EventEmitter, FocusHandle,
     FocusableView, GlobalElementId, Hitbox, InteractiveElement as _, IntoElement, KeyBinding,
     LayoutId, ManagedView, MouseButton, MouseDownEvent, ParentElement, Pixels, Point, Render,
-    Style, Styled, View, ViewContext, VisualContext, WindowContext,
+    SharedString, Style, Styled, View, ViewContext, VisualContext, WindowContext,
 };
 use std::{cell::RefCell, rc::Rc};
 
@@ -131,7 +131,7 @@ where
     }
 
     fn render_trigger(&mut self, is_open: bool, cx: &mut WindowContext) -> impl IntoElement {
-        let base = div().id("popover-trigger");
+        let base = div().id(SharedString::from(format!("{}-trigger", self.id)));
 
         if self.trigger.is_none() {
             return base;