Make create system an observer

examples/focus.rs

@@ -49,6 +49,9 @@ fn setup(mut commands: Commands) {
                     },
                     border_color: BORDER_COLOR_INACTIVE.into(),
                     background_color: BACKGROUND_COLOR.into(),
+                    // Prevent clicks on the input from also bubbling down to the container
+                    // behind it
+                    focus_policy: bevy::ui::FocusPolicy::Block,
                     ..default()
                 },
                 TextInputBundle::default()

src/lib.rs

@@ -29,6 +29,7 @@ use bevy::{
     prelude::*,
     render::camera::RenderTarget,
     text::{BreakLineOn, TextLayoutInfo},
+    ui::FocusPolicy,
     window::{PrimaryWindow, WindowRef},
 };
 
@@ -51,10 +52,10 @@ impl Plugin for TextInputPlugin {
 
         app.init_resource::<TextInputNavigationBindings>()
             .add_event::<TextInputSubmitEvent>()
+            .observe(create)
             .add_systems(
                 Update,
                 (
-                    create,
                     keyboard,
                     update_value.after(keyboard),
                     blink_cursor,
@@ -596,21 +597,20 @@ fn scroll_with_cursor(
 }
 
 fn create(
+    trigger: Trigger<OnAdd, TextInputValue>,
     mut commands: Commands,
-    query: Query<
-        (
-            Entity,
-            &TextInputTextStyle,
-            &TextInputValue,
-            &TextInputCursorPos,
-            &TextInputInactive,
-            &TextInputSettings,
-            &TextInputPlaceholder,
-        ),
-        Added<TextInputValue>,
-    >,
+    query: Query<(
+        &TextInputTextStyle,
+        &TextInputValue,
+        &TextInputCursorPos,
+        &TextInputInactive,
+        &TextInputSettings,
+        &TextInputPlaceholder,
+    )>,
 ) {
-    for (entity, style, text_input, cursor_pos, inactive, settings, placeholder) in &query {
+    if let Ok((style, text_input, cursor_pos, inactive, settings, placeholder)) =
+        &query.get(trigger.entity())
+    {
         let mut sections = vec![
             // Pre-cursor
             TextSection {
@@ -704,8 +704,11 @@ fn create(
 
         commands.entity(overflow_container).add_child(text);
         commands
-            .entity(entity)
+            .entity(trigger.entity())
             .push_children(&[overflow_container, placeholder_text]);
+
+        // Prevent clicks from registering on UI elements underneath the text input.
+        commands.entity(trigger.entity()).insert(FocusPolicy::Block);
     }
 }
 
@@ -798,17 +801,25 @@ fn show_hide_placeholder(
 }
 
 fn update_style(
-    mut input_query: Query<(Entity, &TextInputTextStyle), Changed<TextInputTextStyle>>,
+    mut input_query: Query<
+        (Entity, &TextInputTextStyle, &TextInputInactive),
+        Changed<TextInputTextStyle>,
+    >,
     mut inner_text: InnerText,
 ) {
-    for (entity, style) in &mut input_query {
+    for (entity, style, inactive) in &mut input_query {
         let Some(mut text) = inner_text.get_mut(entity) else {
             continue;
         };
 
         text.sections[0].style = style.0.clone();
         text.sections[1].style = TextStyle {
             font: CURSOR_HANDLE,
+            color: if inactive.0 {
+                Color::NONE
+            } else {
+                style.0.color
+            },
             ..style.0.clone()
         };
         text.sections[2].style = style.0.clone();