Reworked autofocus, it's now a property on the button.

TODO.md

@@ -2,8 +2,8 @@
 
 * Text input.
 * Change tab handling to use bubbled events.
-* Dialogs should focus.
 * ESC to close dialog.
+* Restore focus when dialog closes.
 * Rounded corners for sliders.
 * Memoized Signals
 * Verify Razing / Despawning doesn't leak

crates/obsidian_ui/src/controls/button.rs

@@ -1,5 +1,5 @@
 use crate::{
-    focus::{KeyPressEvent, TabIndex},
+    focus::{AutoFocus, KeyPressEvent, TabIndex},
     hooks::CreateFocusSignal,
     RoundedCorners,
 };
@@ -60,6 +60,9 @@ pub struct ButtonProps {
 
     /// Which corners to render rounded.
     pub corners: RoundedCorners,
+
+    /// If true, set focus to this button when it's added to the UI.
+    pub autofocus: bool,
 }
 
 fn style_button(ss: &mut StyleBuilder) {
@@ -171,6 +174,7 @@ pub fn button(cx: &mut Cx<ButtonProps>) -> Element<NodeBundle> {
                 }
             }),
         ))
+        .insert_if(cx.props.autofocus, AutoFocus)
         .children((
             Element::<MaterialNodeBundle<RoundedRectMaterial>>::new()
                 .insert(material.clone())

crates/obsidian_ui/src/controls/dialog.rs

@@ -9,7 +9,7 @@ use bevy_reactor::*;
 use crate::{
     animation::{AnimatedBackgroundColor, AnimatedTransition},
     colors,
-    focus::{TabGroup, TabNavigation},
+    focus::TabGroup,
     hooks::{BistableTransitionState, CreateBistableTransition},
     typography::text_default,
 };
@@ -123,7 +123,6 @@ pub fn dialog(cx: &mut Cx<DialogProps>) -> impl View {
                             .insert(TabGroup {
                                 order: 0,
                                 modal: true,
-                                auto_focus: true,
                             })
                             .with_styles(style_dialog)
                             .with_child(&children),

crates/obsidian_ui/src/focus.rs

@@ -56,6 +56,10 @@ pub struct KeyPressEvent {
 #[derive(Debug, Default, Component, Copy, Clone)]
 pub struct TabIndex(pub i32);
 
+/// Indicates that this widget should automatically receive focus when it's added.
+#[derive(Debug, Default, Component, Copy, Clone)]
+pub struct AutoFocus;
+
 /// A component used to mark a tree of entities as containing tabbable elements.
 #[derive(Debug, Default, Component, Copy, Clone)]
 pub struct TabGroup {
@@ -67,10 +71,6 @@ pub struct TabGroup {
     /// of this group. If false, then tabbing within the group will cycle through all non-modal
     /// tab groups.
     pub modal: bool,
-
-    /// If true, then the group will automatically focus the first focusable entity when this
-    /// component is added to the entity.
-    pub auto_focus: bool,
 }
 
 /// An injectable object that provides tab navigation functionality.
@@ -120,16 +120,6 @@ impl TabNavigation<'_, '_> {
         self.navigate_in_group(tabgroup, focus, reverse)
     }
 
-    /// Automatically focus the first focusable entity in the given tab group.
-    fn auto_focus(&self, tabgroup_entity: Entity) -> Option<Entity> {
-        if let Ok((_, tabgroup, _)) = self.tabgroup.get(tabgroup_entity) {
-            if tabgroup.auto_focus {
-                return self.navigate_in_group(Some((tabgroup_entity, tabgroup)), None, false);
-            }
-        }
-        None
-    }
-
     fn navigate_in_group(
         &self,
         tabgroup: Option<(Entity, &TabGroup)>,
@@ -221,12 +211,11 @@ fn compare_tab_indices(a: &(Entity, TabIndex), b: &(Entity, TabIndex)) -> std::c
 }
 
 fn handle_auto_focus(
-    nav: TabNavigation,
     mut focus: ResMut<Focus>,
-    query: Query<Entity, Added<TabGroup>>,
+    query: Query<Entity, (With<TabIndex>, Added<AutoFocus>)>,
 ) {
     if let Some(entity) = query.iter().next() {
-        focus.0 = nav.auto_focus(entity);
+        focus.0 = Some(entity);
     }
 }
 

examples/complex/main.rs

@@ -209,6 +209,7 @@ fn ui_main(cx: &mut Cx) -> impl View {
                             button.bind(ButtonProps {
                                 children: "Close".into(),
                                 variant: Signal::Constant(ButtonVariant::Primary),
+                                autofocus: true,
                                 on_click: Some(cx.create_callback(move |cx| {
                                     checked_1.set(cx, false);
                                 })),

src/element.rs

@@ -126,6 +126,16 @@ impl<B: Bundle + Default> Element<B> {
         self
     }
 
+    /// Add a static bundle to the element, if a condition is true.
+    pub fn insert_if<T: Bundle>(mut self, cond: bool, bundle: T) -> Self {
+        if cond {
+            self.add_effect(Box::new(InsertBundleEffect {
+                bundle: Some(bundle),
+            }));
+        }
+        self
+    }
+
     /// Add a computed bundle to the element.
     pub fn insert_computed<T: Bundle, F: Send + Sync + 'static + FnMut(&mut Rcx) -> T>(
         mut self,