From 9754cab4d7abb3b966e4e066ad4157b1ac43238f Mon Sep 17 00:00:00 2001
From: Floyd Wang <gassnake999@gmail.com>
Date: Fri, 3 Oct 2025 14:52:53 +0800
Subject: [PATCH] button: Bind element ID after button is created (#1325)

- Fix the selected-state error in the popup menu.
---
 crates/ui/src/button/button.rs | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/crates/ui/src/button/button.rs b/crates/ui/src/button/button.rs
index 80beee9b..04bb6aa6 100644
--- a/crates/ui/src/button/button.rs
+++ b/crates/ui/src/button/button.rs
@@ -7,8 +7,8 @@ use crate::{
 use gpui::{
     div, prelude::FluentBuilder as _, px, relative, Action, AnyElement, App, ClickEvent, Corners,
     Div, Edges, ElementId, Hsla, InteractiveElement, Interactivity, IntoElement, ParentElement,
-    Pixels, RenderOnce, SharedString, StatefulInteractiveElement as _, StyleRefinement, Styled,
-    Window,
+    Pixels, RenderOnce, SharedString, Stateful, StatefulInteractiveElement as _, StyleRefinement,
+    Styled, Window,
 };
 
 #[derive(Default, Clone, Copy)]
@@ -182,7 +182,7 @@ impl ButtonVariant {
 #[derive(IntoElement)]
 pub struct Button {
     id: ElementId,
-    base: Div,
+    base: Stateful<Div>,
     style: StyleRefinement,
     icon: Option<Icon>,
     label: Option<SharedString>,
@@ -217,9 +217,13 @@ impl From<Button> for AnyElement {
 
 impl Button {
     pub fn new(id: impl Into<ElementId>) -> Self {
+        let id = id.into();
+
         Self {
-            id: id.into(),
-            base: div().flex_shrink_0(),
+            id: id.clone(),
+            // ID must be set after div is created;
+            // `popup_menu` uses this id to create the popup menu.
+            base: div().flex_shrink_0().id(id),
             style: StyleRefinement::default(),
             icon: None,
             label: None,
@@ -415,7 +419,6 @@ impl RenderOnce for Button {
         let is_focused = focus_handle.is_focused(window);
 
         self.base
-            .id(self.id.clone())
             .when(!self.disabled, |this| {
                 this.track_focus(
                     &focus_handle