Implement focus events

nicoburns · nicoburns · commit 60be17789e67 · 2025-12-16T13:57:56.000Z
diff --git a/packages/blitz-dom/src/events/focus.rs b/packages/blitz-dom/src/events/focus.rs
@@ -0,0 +1,40 @@
+use blitz_traits::events::{BlitzFocusEvent, DomEvent, DomEventData};
+
+use crate::BaseDocument;
+
+pub(crate) fn generate_focus_events(
+    doc: &mut BaseDocument,
+    update_focus: &mut dyn FnMut(&mut BaseDocument),
+    dispatch_event: &mut dyn FnMut(DomEvent),
+) {
+    // Update focus, tracking which node was focussed before and after
+    let old_focus = doc.get_focussed_node_id();
+    update_focus(doc);
+    let new_focus = doc.get_focussed_node_id();
+
+    if old_focus == new_focus {
+        return;
+    }
+
+    if let Some(old_focus) = old_focus {
+        dispatch_event(DomEvent::new(
+            old_focus,
+            DomEventData::Blur(BlitzFocusEvent),
+        ));
+        dispatch_event(DomEvent::new(
+            old_focus,
+            DomEventData::FocusOut(BlitzFocusEvent),
+        ));
+    }
+
+    if let Some(new_focus) = new_focus {
+        dispatch_event(DomEvent::new(
+            new_focus,
+            DomEventData::Focus(BlitzFocusEvent),
+        ));
+        dispatch_event(DomEvent::new(
+            new_focus,
+            DomEventData::FocusIn(BlitzFocusEvent),
+        ));
+    }
+}
diff --git a/packages/blitz-dom/src/events/mod.rs b/packages/blitz-dom/src/events/mod.rs
@@ -1,4 +1,5 @@
 mod driver;
+mod focus;
 mod ime;
 mod keyboard;
 mod mouse;
@@ -57,6 +58,10 @@ pub(crate) fn handle_dom_event<F: FnMut(DomEvent)>(
             DomEventData::Input(_) => None,
             DomEventData::Wheel(data) => Some(UiEvent::Wheel(data)),
             DomEventData::Scroll(_) => None,
+            DomEventData::Focus(_) => None,
+            DomEventData::Blur(_) => None,
+            DomEventData::FocusIn(_) => None,
+            DomEventData::FocusOut(_) => None,
         };
 
         if let Some(ui_event) = ui_event {
@@ -87,7 +92,14 @@ pub(crate) fn handle_dom_event<F: FnMut(DomEvent)>(
             }
         }
         DomEventData::MouseDown(event) => {
-            handle_mousedown(doc, target_node_id, event.x, event.y, event.mods);
+            handle_mousedown(
+                doc,
+                target_node_id,
+                event.x,
+                event.y,
+                event.mods,
+                &mut dispatch_event,
+            );
         }
         DomEventData::MouseUp(event) => {
             handle_mouseup(doc, target_node_id, event, dispatch_event);
@@ -134,5 +146,17 @@ pub(crate) fn handle_dom_event<F: FnMut(DomEvent)>(
         DomEventData::Wheel(event) => {
             handle_wheel(doc, target_node_id, event.clone(), dispatch_event);
         }
+        DomEventData::Focus(_) => {
+            // Do nothing (no default action)
+        }
+        DomEventData::Blur(_) => {
+            // Do nothing (no default action)
+        }
+        DomEventData::FocusIn(_) => {
+            // Do nothing (no default action)
+        }
+        DomEventData::FocusOut(_) => {
+            // Do nothing (no default action)
+        }
     }
 }
diff --git a/packages/blitz-dom/src/events/mouse.rs b/packages/blitz-dom/src/events/mouse.rs
@@ -12,6 +12,8 @@ use markup5ever::local_name;
 
 use crate::{BaseDocument, node::SpecialElementData};
 
+use super::focus::generate_focus_events;
+
 pub(crate) fn handle_mousemove<F: FnMut(DomEvent)>(
     doc: &mut BaseDocument,
     target: usize,
@@ -86,6 +88,7 @@ pub(crate) fn handle_mousedown(
     x: f32,
     y: f32,
     mods: Modifiers,
+    dispatch_event: &mut dyn FnMut(DomEvent),
 ) {
     let Some(hit) = doc.hit(x, y) else {
         return;
@@ -152,7 +155,13 @@ pub(crate) fn handle_mousedown(
         }
 
         drop(font_ctx);
-        doc.set_focus_to(hit.node_id);
+        generate_focus_events(
+            doc,
+            &mut |doc| {
+                doc.set_focus_to(hit.node_id);
+            },
+            dispatch_event,
+        );
     }
 }
 
@@ -235,7 +244,13 @@ pub(crate) fn handle_click(
                         node_id,
                         DomEventData::Input(BlitzInputEvent { value }),
                     ));
-                    doc.set_focus_to(node_id);
+                    generate_focus_events(
+                        doc,
+                        &mut |doc| {
+                            doc.set_focus_to(node_id);
+                        },
+                        dispatch_event,
+                    );
                     break 'matched true;
                 }
                 local_name!("input") if el.attr(local_name!("type")) == Some("radio") => {
@@ -249,7 +264,13 @@ pub(crate) fn handle_click(
                         DomEventData::Input(BlitzInputEvent { value }),
                     ));
 
-                    BaseDocument::set_focus_to(doc, node_id);
+                    generate_focus_events(
+                        doc,
+                        &mut |doc| {
+                            doc.set_focus_to(node_id);
+                        },
+                        dispatch_event,
+                    );
 
                     break 'matched true;
                 }
@@ -336,7 +357,7 @@ pub(crate) fn handle_click(
 
     // If nothing is matched then clear focus
     if !matched {
-        doc.clear_focus();
+        generate_focus_events(doc, &mut |doc| doc.clear_focus(), dispatch_event);
     }
 
     // Assumed double click time to be less than 500ms, although may be system-dependant?
diff --git a/packages/blitz-traits/src/events.rs b/packages/blitz-traits/src/events.rs
@@ -114,6 +114,10 @@ pub enum DomEventKind {
     KeyUp,
     Input,
     Ime,
+    Focus,
+    Blur,
+    FocusIn,
+    FocusOut,
 }
 impl DomEventKind {
     pub fn discriminant(self) -> u8 {
@@ -141,6 +145,10 @@ impl FromStr for DomEventKind {
             "keyup" => Ok(Self::KeyUp),
             "input" => Ok(Self::Input),
             "composition" => Ok(Self::Ime),
+            "focus" => Ok(Self::Focus),
+            "blur" => Ok(Self::Blur),
+            "focusin" => Ok(Self::FocusIn),
+            "focusout" => Ok(Self::FocusOut),
             _ => Err(()),
         }
     }
@@ -166,6 +174,10 @@ pub enum DomEventData {
     KeyUp(BlitzKeyEvent),
     Input(BlitzInputEvent),
     Ime(BlitzImeEvent),
+    Focus(BlitzFocusEvent),
+    Blur(BlitzFocusEvent),
+    FocusIn(BlitzFocusEvent),
+    FocusOut(BlitzFocusEvent),
 }
 impl DomEventData {
     pub fn discriminant(&self) -> u8 {
@@ -197,6 +209,10 @@ impl DomEventData {
             Self::KeyUp { .. } => "keyup",
             Self::Input { .. } => "input",
             Self::Ime { .. } => "composition",
+            Self::Focus { .. } => "focus",
+            Self::Blur { .. } => "blur",
+            Self::FocusIn { .. } => "focusin",
+            Self::FocusOut { .. } => "focusout",
         }
     }
 
@@ -219,6 +235,10 @@ impl DomEventData {
             Self::KeyUp { .. } => DomEventKind::KeyUp,
             Self::Input { .. } => DomEventKind::Input,
             Self::Ime { .. } => DomEventKind::Ime,
+            Self::Focus { .. } => DomEventKind::Focus,
+            Self::Blur { .. } => DomEventKind::Blur,
+            Self::FocusIn { .. } => DomEventKind::FocusIn,
+            Self::FocusOut { .. } => DomEventKind::FocusOut,
         }
     }
 
@@ -241,6 +261,10 @@ impl DomEventData {
             Self::KeyPress { .. } => true,
             Self::Ime { .. } => true,
             Self::Input { .. } => false,
+            Self::Focus { .. } => false,
+            Self::Blur { .. } => false,
+            Self::FocusIn { .. } => false,
+            Self::FocusOut { .. } => false,
         }
     }
 
@@ -263,6 +287,10 @@ impl DomEventData {
             Self::KeyPress { .. } => true,
             Self::Ime { .. } => true,
             Self::Input { .. } => true,
+            Self::Focus { .. } => false,
+            Self::Blur { .. } => false,
+            Self::FocusIn { .. } => true,
+            Self::FocusOut { .. } => true,
         }
     }
 }
@@ -400,6 +428,9 @@ pub struct BlitzInputEvent {
     pub value: String,
 }
 
+#[derive(Clone, Debug)]
+pub struct BlitzFocusEvent;
+
 /// Copy of Winit IME event to avoid lower-level Blitz crates depending on winit
 #[derive(Debug, Clone, PartialEq, Eq, Hash)]
 pub enum BlitzImeEvent {
diff --git a/packages/dioxus-native-dom/src/dioxus_document.rs b/packages/dioxus-native-dom/src/dioxus_document.rs
@@ -1,7 +1,7 @@
 //! Integration between Dioxus and Blitz
 use crate::events::{
-    BlitzKeyboardData, NativeClickData, NativeConverter, NativeFormData, NativeScrollData,
-    NativeWheelData,
+    BlitzKeyboardData, NativeClickData, NativeConverter, NativeFocusData, NativeFormData,
+    NativeScrollData, NativeWheelData,
 };
 use crate::mutation_writer::{DioxusState, MutationWriter};
 use crate::qual_name;
@@ -269,6 +269,11 @@ impl EventHandler for DioxusEventHandler<'_> {
             DomEventData::Scroll(sevent) => Some(wrap_event_data(NativeScrollData(sevent.clone()))),
             DomEventData::Wheel(wevent) => Some(wrap_event_data(NativeWheelData(wevent.clone()))),
 
+            DomEventData::Focus(_) => Some(wrap_event_data(NativeFocusData)),
+            DomEventData::Blur(_) => Some(wrap_event_data(NativeFocusData)),
+            DomEventData::FocusIn(_) => Some(wrap_event_data(NativeFocusData)),
+            DomEventData::FocusOut(_) => Some(wrap_event_data(NativeFocusData)),
+
             DomEventData::KeyDown(kevent)
             | DomEventData::KeyUp(kevent)
             | DomEventData::KeyPress(kevent) => {
diff --git a/packages/dioxus-native-dom/src/events.rs b/packages/dioxus-native-dom/src/events.rs
@@ -226,7 +226,7 @@ impl HasMouseData for NativeClickData {
 }
 
 #[derive(Clone)]
-pub struct NativeFocusData {}
+pub struct NativeFocusData;
 impl HasFocusData for NativeFocusData {
     fn as_any(&self) -> &dyn Any {
         self as &dyn Any

Original file line number	Diff line number	Diff line change
`@@ -226,7 +226,7 @@ impl HasMouseData for NativeClickData {`
`226`	`226`	`}`
`227`	`227`
`228`	`228`	`#[derive(Clone)]`
`229`		`-pub struct NativeFocusData {}`
	`229`	`+pub struct NativeFocusData;`
`230`	`230`	`impl HasFocusData for NativeFocusData {`
`231`	`231`	`fn as_any(&self) -> &dyn Any {`
`232`	`232`	`self as &dyn Any`