From 5228a764685e8764585aedc7c4f94fdc544375e0 Mon Sep 17 00:00:00 2001
From: mathieu <mathieubourbon49@gmail.com>
Date: Sat, 16 May 2026 21:33:33 +0200
Subject: [PATCH] fix(hosts,applications): fix modal re-open bug and autofocus
 first field

Move the add-modal auto-close Effect from each modal component to its
parent page component. This prevents the stale-value re-trigger bug
where the Effect would immediately close the modal on second open
because action.value() still held the previous Ok result.

Also add autofocus on the first input field of each add modal using
NodeRef<Input> so the user can start typing immediately on open.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/client/applications.rs | 22 ++++++++++++++++++++--
 src/client/hosts.rs        | 22 ++++++++++++++++++----
 2 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/src/client/applications.rs b/src/client/applications.rs
index e5cd526..8fc67d8 100644
--- a/src/client/applications.rs
+++ b/src/client/applications.rs
@@ -8,6 +8,7 @@
 
 use leptos::prelude::*;
 use leptos::form::ActionForm;
+use leptos::html::Input;
 
 use crate::api::applications::{
     ApplicationWithCounts, CreateApplication, DeleteApplication,
@@ -21,9 +22,12 @@ fn AddApplicationModal(
     create_action: ServerAction<CreateApplication>,
     show_modal: RwSignal<bool>,
 ) -> impl IntoView {
+    let name_ref = NodeRef::<Input>::new();
+
+    // Focus the name field as soon as the modal is mounted.
     Effect::new(move |_| {
-        if let Some(Ok(_)) = create_action.value().get() {
-            show_modal.set(false);
+        if let Some(el) = name_ref.get() {
+            let _ = el.focus();
         }
     });
 
@@ -43,6 +47,7 @@ fn AddApplicationModal(
                         <label>
                             "Name"
                             <input
+                                node_ref=name_ref
                                 type="text"
                                 name="name"
                                 placeholder="e.g. Nginx, PostgreSQL, Prometheus"
@@ -132,6 +137,19 @@ pub fn ApplicationsPage() -> impl IntoView {
     // Name filter (client-side — list is typically small)
     let name_filter = RwSignal::new(String::new());
 
+    // Close the add modal when the action transitions pending→done with Ok.
+    // Lives in the parent so it is never recreated across modal open/close cycles,
+    // which avoids the stale-value re-trigger bug.
+    Effect::new(move |was_pending: Option<bool>| {
+        let is_pending = create_action.pending().get();
+        if was_pending == Some(true) && !is_pending {
+            if let Some(Ok(_)) = create_action.value().get() {
+                show_modal.set(false);
+            }
+        }
+        is_pending
+    });
+
     // Close the delete modal automatically after a successful deletion.
     Effect::new(move |_| {
         if let Some(Ok(_)) = delete_action.value().get() {
diff --git a/src/client/hosts.rs b/src/client/hosts.rs
index 9c03ee2..c8639e1 100644
--- a/src/client/hosts.rs
+++ b/src/client/hosts.rs
@@ -12,6 +12,7 @@
 
 use leptos::prelude::*;
 use leptos::form::ActionForm;
+use leptos::html::Input;
 
 use crate::api::{
     applications::get_applications,
@@ -76,10 +77,12 @@ fn AddHostModal(
     networks_res: LocalResource<Result<Vec<crate::models::Network>, ServerFnError>>,
     show_modal: RwSignal<bool>,
 ) -> impl IntoView {
-    // Close the modal automatically after a successful creation.
+    let name_ref = NodeRef::<Input>::new();
+
+    // Focus the name field as soon as the modal is mounted.
     Effect::new(move |_| {
-        if let Some(Ok(_)) = create_action.value().get() {
-            show_modal.set(false);
+        if let Some(el) = name_ref.get() {
+            let _ = el.focus();
         }
     });
 
@@ -100,7 +103,7 @@ fn AddHostModal(
                     <div class="add-form__fields">
                         <label>
                             "Name"
-                            <input type="text" name="name" placeholder="e.g. web-server-01" required/>
+                            <input node_ref=name_ref type="text" name="name" placeholder="e.g. web-server-01" required/>
                         </label>
                         <label>
                             "IP address"
@@ -364,6 +367,17 @@ pub fn HostsPage() -> impl IntoView {
     // None = no modal, Some((id, name)) = delete confirmation open.
     let pending_delete: RwSignal<Option<(i64, String)>> = RwSignal::new(None);
 
+    // Close the add modal on pending→done with Ok (lives in parent to avoid stale-value re-trigger).
+    Effect::new(move |was_pending: Option<bool>| {
+        let is_pending = create_action.pending().get();
+        if was_pending == Some(true) && !is_pending {
+            if let Some(Ok(_)) = create_action.value().get() {
+                show_modal.set(false);
+            }
+        }
+        is_pending
+    });
+
     // Close the delete modal automatically after a successful deletion.
     Effect::new(move |_| {
         if let Some(Ok(_)) = delete_action.value().get() {