Fix shared element state across component instances

crates/data/src/tabs.rs

@@ -32,6 +32,8 @@ pub enum TabsVariant {
 
 /// One tab of a [`Tabs`] strip.
 pub struct Tab {
+    /// The stable identity for element state; must survive reordering.
+    key: ElementId,
     label: SharedString,
     icon: Option<IconRole>,
     lead: Option<AnyElement>,
@@ -42,12 +44,14 @@ pub struct Tab {
 }
 
 impl Tab {
-    /// Creates a tab with this label.
-    pub fn new<L>(label: L) -> Self
+    /// Creates a tab shown as `label`, identified by `key`.
+    pub fn new<K, L>(key: K, label: L) -> Self
     where
+        K: Into<ElementId>,
         L: Into<SharedString>,
     {
         Self {
+            key: key.into(),
             label: label.into(),
             icon: None,
             lead: None,
@@ -301,7 +305,7 @@ fn render_tab(
     };
 
     let mut strip_tab = div()
-        .id(("tab", index))
+        .id((tab.key.clone(), "tab"))
         .debug_selector({
             let id = format!("{tabs_id}-tab-{}", tab.label);
             move || id
@@ -364,7 +368,7 @@ fn render_tab(
 
     if tab.busy && !tab.disabled {
         strip_tab = strip_tab.child(
-            Spinner::new(("tab-busy", index))
+            Spinner::new((tab.key.clone(), "tab-busy"))
                 .small()
                 .accessibility_label("Loading"),
         );
@@ -401,7 +405,7 @@ fn render_tab_close(
     index: usize,
     on_close: &Option<CloseHandler>,
 ) -> AnyElement {
-    Button::new(("tab-close", index))
+    Button::new((tab.key.clone(), "tab-close"))
         .icon(IconRole::Close)
         .variant(ButtonVariant::Ghost)
         .small()

crates/data/tests/tabs.rs

@@ -30,10 +30,10 @@ impl Render for Harness {
                 })
                 .tabs(|_, _| {
                     vec![
-                        Tab::new("One"),
-                        Tab::new("Two"),
-                        Tab::new("Off").disabled(true),
-                        Tab::new("End"),
+                        Tab::new("one", "One"),
+                        Tab::new("two", "Two"),
+                        Tab::new("off", "Off").disabled(true),
+                        Tab::new("end", "End"),
                     ]
                 }),
         )