diff --git a/crates/gpui3/src/elements/div.rs b/crates/gpui3/src/elements/div.rs
index b2fe20530dd0ac491657615c7ee10299f3677373..2e5fc1670ab78914f6587f841ed79c8de65f3a8e 100644
--- a/crates/gpui3/src/elements/div.rs
+++ b/crates/gpui3/src/elements/div.rs
@@ -153,12 +153,14 @@ where
     }
 }
 
-impl<V, I> Div<V, I, FocusDisabled>
+impl<V> Div<V, StatefulInteraction<V>, FocusDisabled>
 where
-    I: ElementInteraction<V>,
     V: 'static + Send + Sync,
 {
-    pub fn focusable(self, handle: &FocusHandle) -> Div<V, I, FocusEnabled<V>> {
+    pub fn focusable(
+        self,
+        handle: &FocusHandle,
+    ) -> Div<V, StatefulInteraction<V>, FocusEnabled<V>> {
         Div {
             interaction: self.interaction,
             focus: handle.clone().into(),
@@ -169,6 +171,24 @@ where
     }
 }
 
+impl<V> Div<V, StatelessInteraction<V>, FocusDisabled>
+where
+    V: 'static + Send + Sync,
+{
+    pub fn focusable(
+        self,
+        handle: &FocusHandle,
+    ) -> Div<V, StatefulInteraction<V>, FocusEnabled<V>> {
+        Div {
+            interaction: self.interaction.into_stateful(handle),
+            focus: handle.clone().into(),
+            children: self.children,
+            group: self.group,
+            base_style: self.base_style,
+        }
+    }
+}
+
 impl<V, I> Focusable for Div<V, I, FocusEnabled<V>>
 where
     I: ElementInteraction<V>,
diff --git a/crates/gpui3/src/interactive.rs b/crates/gpui3/src/interactive.rs
index c0c787fe4992890f4555bf67720dbf2502c7f5b5..dd50082bae7a2e35d7708b20b561113d648d4e74 100644
--- a/crates/gpui3/src/interactive.rs
+++ b/crates/gpui3/src/interactive.rs
@@ -544,6 +544,21 @@ pub struct StatelessInteraction<V> {
     pub group_hover_style: Option<GroupStyle>,
 }
 
+impl<V> StatelessInteraction<V>
+where
+    V: 'static + Send + Sync,
+{
+    pub fn into_stateful(self, id: impl Into<ElementId>) -> StatefulInteraction<V> {
+        StatefulInteraction {
+            id: id.into(),
+            stateless: self,
+            mouse_click_listeners: SmallVec::new(),
+            active_style: StyleRefinement::default(),
+            group_active_style: None,
+        }
+    }
+}
+
 pub struct GroupStyle {
     pub group: SharedString,
     pub style: StyleRefinement,
diff --git a/crates/gpui3/src/window.rs b/crates/gpui3/src/window.rs
index 2652270ba1afcef409addf5837af40f663fae398..7e75d9ab42e18c5746becce1bc1be919de28005f 100644
--- a/crates/gpui3/src/window.rs
+++ b/crates/gpui3/src/window.rs
@@ -1573,6 +1573,7 @@ pub enum ElementId {
     View(EntityId),
     Number(usize),
     Name(SharedString),
+    FocusHandle(FocusId),
 }
 
 impl From<EntityId> for ElementId {
@@ -1604,3 +1605,9 @@ impl From<&'static str> for ElementId {
         ElementId::Name(name.into())
     }
 }
+
+impl<'a> From<&'a FocusHandle> for ElementId {
+    fn from(handle: &'a FocusHandle) -> Self {
+        ElementId::FocusHandle(handle.id)
+    }
+}
diff --git a/crates/storybook2/src/stories/focus.rs b/crates/storybook2/src/stories/focus.rs
index 1d7638c8785631c6c27b88f40d7bd5c0c25da339..88f0c0b0b3c9cf1f1cd21329c89032e97e8e3c44 100644
--- a/crates/storybook2/src/stories/focus.rs
+++ b/crates/storybook2/src/stories/focus.rs
@@ -81,7 +81,6 @@ impl FocusStory {
         let child_2 = cx.focus_handle();
         view(cx.entity(|cx| ()), move |_, cx| {
             div()
-                .id("parent")
                 .focusable(&parent)
                 .context("parent")
                 .on_action(|_, action: &ActionA, phase, cx| {
@@ -106,12 +105,11 @@ impl FocusStory {
                 .focus_in(|style| style.bg(color_3))
                 .child(
                     div()
-                        .id("child-1")
+                        .focusable(&child_1)
                         .context("child-1")
                         .on_action(|_, action: &ActionB, phase, cx| {
                             println!("Action B dispatched on child 1 during {:?}", phase);
                         })
-                        .focusable(&child_1)
                         .w_full()
                         .h_6()
                         .bg(color_4)
@@ -131,12 +129,11 @@ impl FocusStory {
                 )
                 .child(
                     div()
-                        .id("child-2")
+                        .focusable(&child_2)
                         .context("child-2")
                         .on_action(|_, action: &ActionC, phase, cx| {
                             println!("Action C dispatched on child 2 during {:?}", phase);
                         })
-                        .focusable(&child_2)
                         .w_full()
                         .h_6()
                         .bg(color_4)