From 0829f6400afbee2ccbbfdff78e89ad899d6096b5 Mon Sep 17 00:00:00 2001
From: Tim Wilkinson <tim.j.wilkinson@gmail.com>
Date: Mon, 26 Aug 2024 11:55:42 -0700
Subject: [PATCH] Focus newly created items (#1410)

---
 files/app/main/status/e/dhcp.ut             | 4 +++-
 files/app/main/status/e/local-services.ut   | 6 +++++-
 files/app/main/status/e/ports-and-xlinks.ut | 4 +++-
 files/app/main/status/e/tunnels.ut          | 1 +
 4 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/files/app/main/status/e/dhcp.ut b/files/app/main/status/e/dhcp.ut
index 10b8ad60..c6768772 100755
--- a/files/app/main/status/e/dhcp.ut
+++ b/files/app/main/status/e/dhcp.ut
@@ -477,7 +477,9 @@ if (f) {
                                     Object.assign(o, { name: "", mac: "", noprop: true, reserved: true, leased: false });
                                     const item = document.createElement("div");
                                     item.innerHTML = `<div class="cols reservation" data-ip="${o.ip}"><div style="white-space:nowrap"><input name="hostname" type="text" placeholder="hostname" value="${o.name}" required> <select class="dhcp-addresses"></select> <input name="mac" type="text" placeholder="mac a&zwnj;ddress" required pattern="([0-9a-fA-F][0-9a-fA-F]:){5}[0-9a-fA-F][0-9a-fA-F]" value="${o.mac}"><label> <input type="checkbox" ${o.noprop ? "checked" : ""}></label></div><button>-</button></div>`;
-                                    htmx.find("#dhcp-reservations").appendChild(item.firstChild);
+                                    const ic = item.firstChild;
+                                    htmx.find("#dhcp-reservations").appendChild(ic);
+                                    htmx.find(ic, "input").focus();
                                 }
                                 if (!options.find(o => !o.reserved && !o.leased)) {
                                     target.disabled = true;
diff --git a/files/app/main/status/e/local-services.ut b/files/app/main/status/e/local-services.ut
index 3d2e35ef..bac6262f 100755
--- a/files/app/main/status/e/local-services.ut
+++ b/files/app/main/status/e/local-services.ut
@@ -514,6 +514,7 @@ if (f) {
                 htmx.find(div, "select[name=type]").value = t.type || "";
                 const ls = htmx.find("#local-services");
                 ls.insertBefore(div.firstChild, ls.firstChild);
+                htmx.find(ls, "input").focus();
                 refreshHostSelectors();
                 updateServices();
             }
@@ -547,6 +548,7 @@ if (f) {
             </div>`;
             const ha = htmx.find("#host-aliases");
             ha.insertBefore(div.firstChild, ha.firstChild);
+            htmx.find(ha, "input").focus();
             refreshHostSelectors();
             updateAliases();
         });
@@ -607,7 +609,9 @@ if (f) {
     </div>
     <button>-</button>
 </div>`;
-            htmx.find("#port-forwards").appendChild(div.firstChild);
+            const pf = htmx.find("#port-forwards");
+            pf.appendChild(div.firstChild);
+            htmx.find(pf, "input[name=port_sports]").focus();
         });
         htmx.on("#port-forwards", "change", _ => updatePortForwards());
         htmx.on("#port-forwards", "select", _ => updatePortForwards());
diff --git a/files/app/main/status/e/ports-and-xlinks.ut b/files/app/main/status/e/ports-and-xlinks.ut
index 7d4670a0..a2653393 100755
--- a/files/app/main/status/e/ports-and-xlinks.ut
+++ b/files/app/main/status/e/ports-and-xlinks.ut
@@ -471,7 +471,9 @@ uciMesh.foreach("xlink", "interface", x => {
 </div>
 <button>-</button>
 </div>`;
-            ls.appendChild(div.firstChild);
+            const fc = div.firstChild;
+            ls.appendChild(fc);
+            htmx.find(fc, "input").focus();
         });
     })();
     </script>
diff --git a/files/app/main/status/e/tunnels.ut b/files/app/main/status/e/tunnels.ut
index c6041d70..883c90db 100755
--- a/files/app/main/status/e/tunnels.ut
+++ b/files/app/main/status/e/tunnels.ut
@@ -488,6 +488,7 @@ This value is used by default, but each tunnel may overide it.
 </div>`;
             const t = htmx.find("#tunnels");
             t.insertBefore(div.firstChild, t.firstChild);
+            htmx.find(t, "input").focus();
         });
         htmx.on("#tunnels", "change", updateTunnels);
         htmx.on("#tunnels", "click", event => {