From 7986c2072b0e26ca06d6c3a07196cf9faaa1bf56 Mon Sep 17 00:00:00 2001
From: Victor Quiroz <git@victorhqc.com>
Date: Tue, 1 Apr 2025 10:41:46 +0200
Subject: [PATCH] sidebar: Fix menu item click handler (#759)

The sidebar stopped working properly. Only one item was handling the
click, by giving the ID to the `SidebarMenuItem` the issue seems to be
resolved. I guess something changed within `gpui` itself that it broke.

**Before**



https://github.com/user-attachments/assets/e4fd21a9-e16d-4be6-b687-64a8a040eee7

**After**



https://github.com/user-attachments/assets/aed91762-c8ae-49f3-aaa8-77df2155f0c6

---------

Co-authored-by: Jason Lee <huacnlee@gmail.com>
---
 crates/ui/src/sidebar/menu.rs | 27 +++++++++++++++++++++------
 crates/ui/src/sidebar/mod.rs  |  3 ++-
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/crates/ui/src/sidebar/menu.rs b/crates/ui/src/sidebar/menu.rs
index 25c2d7eb..5fea29a7 100644
--- a/crates/ui/src/sidebar/menu.rs
+++ b/crates/ui/src/sidebar/menu.rs
@@ -1,8 +1,8 @@
 use crate::{h_flex, v_flex, ActiveTheme as _, Collapsible, Icon, IconName, StyledExt};
 use gpui::{
-    div, percentage, prelude::FluentBuilder as _, App, ClickEvent, InteractiveElement as _,
-    IntoElement, ParentElement as _, RenderOnce, SharedString, StatefulInteractiveElement as _,
-    Styled as _, Window,
+    div, percentage, prelude::FluentBuilder as _, App, ClickEvent, ElementId,
+    InteractiveElement as _, IntoElement, ParentElement as _, RenderOnce, SharedString,
+    StatefulInteractiveElement as _, Styled as _, Window,
 };
 use std::rc::Rc;
 
@@ -48,7 +48,8 @@ impl RenderOnce for SidebarMenu {
         v_flex().gap_2().children(
             self.items
                 .into_iter()
-                .map(|item| item.collapsed(self.collapsed)),
+                .enumerate()
+                .map(|(ix, item)| item.id(ix).collapsed(self.collapsed)),
         )
     }
 }
@@ -56,6 +57,7 @@ impl RenderOnce for SidebarMenu {
 /// A sidebar menu item
 #[derive(IntoElement)]
 pub struct SidebarMenuItem {
+    id: ElementId,
     icon: Option<Icon>,
     label: SharedString,
     handler: Rc<dyn Fn(&ClickEvent, &mut Window, &mut App)>,
@@ -68,6 +70,7 @@ impl SidebarMenuItem {
     /// Create a new SidebarMenuItem with a label
     pub fn new(label: impl Into<SharedString>) -> Self {
         Self {
+            id: ElementId::Integer(0),
             icon: None,
             label: label.into(),
             handler: Rc::new(|_, _, _| {}),
@@ -83,6 +86,12 @@ impl SidebarMenuItem {
         self
     }
 
+    /// Set id to the menu item.
+    fn id(mut self, id: impl Into<ElementId>) -> Self {
+        self.id = id.into();
+        self
+    }
+
     /// Set the active state of the menu item
     pub fn active(mut self, active: bool) -> Self {
         self.active = active;
@@ -129,7 +138,7 @@ impl SidebarMenuItem {
         let is_submenu = self.is_submenu();
 
         h_flex()
-            .id("sidebar-menu-item")
+            .id(self.id.clone())
             .overflow_hidden()
             .flex_shrink_0()
             .p_2()
@@ -178,13 +187,19 @@ impl RenderOnce for SidebarMenuItem {
             .when(is_submenu && is_open && !is_collapsed, |this| {
                 this.child(
                     v_flex()
+                        .id("submenu")
                         .border_l_1()
                         .border_color(cx.theme().sidebar_border)
                         .gap_1()
                         .mx_3p5()
                         .px_2p5()
                         .py_0p5()
-                        .children(self.children),
+                        .children(
+                            self.children
+                                .into_iter()
+                                .enumerate()
+                                .map(|(ix, item)| item.id(ix)),
+                        ),
                 )
             })
     }
diff --git a/crates/ui/src/sidebar/mod.rs b/crates/ui/src/sidebar/mod.rs
index 5efb4b38..a4cb4606 100644
--- a/crates/ui/src/sidebar/mod.rs
+++ b/crates/ui/src/sidebar/mod.rs
@@ -206,7 +206,8 @@ impl<E: Collapsible + IntoElement> RenderOnce for Sidebar<E> {
                         .children(
                             self.content
                                 .into_iter()
-                                .map(|c| c.collapsed(self.collapsed)),
+                                .enumerate()
+                                .map(|(ix, c)| div().id(ix).child(c.collapsed(self.collapsed))),
                         )
                         .gap_2()
                         .scrollable(self.view_id, ScrollbarAxis::Vertical),