From 18cb4cc3c8cf1265428d517214a6ee8cc7261597 Mon Sep 17 00:00:00 2001
From: bach <bachir@figureslibres.io>
Date: Sun, 6 Sep 2026 11:14:02 +0200
Subject: [PATCH] Auto-focus click-to-edit fields instead of requiring a second
 click
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Type/Client/Facture/Libellé all swap a span for an <input>/<select> via
v-if -- Vue doesn't focus a newly created element on its own, so the
first click only revealed the field and a second click was needed to
actually type into it. Added a v-focus directive (mounted() calls
el.focus() + el.select(), firing exactly once per v-if true-flip) to
all four.

Verified live: a single click on each of the four editable cells now
moves document.activeElement into the field immediately.
---
 web/modules/custom/figli_compta_ledger/js/home.js | 15 ++++++++++++++-
 .../templates/figli-compta-home.html.twig         |  4 ++++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/web/modules/custom/figli_compta_ledger/js/home.js b/web/modules/custom/figli_compta_ledger/js/home.js
index 4fef4b2..1d39f23 100644
--- a/web/modules/custom/figli_compta_ledger/js/home.js
+++ b/web/modules/custom/figli_compta_ledger/js/home.js
@@ -1292,7 +1292,20 @@
       const root = context.querySelector ? context.querySelector('#figli-home-app') : null;
       if (root && !root.dataset.figliInitialized) {
         root.dataset.figliInitialized = '1';
-        Vue.createApp(App).mount(root);
+        Vue.createApp(App)
+          // Click-to-edit cells (type/client/facture/libellé) swap a
+          // span for an <input>/<select> via v-if -- Vue doesn't focus a
+          // newly created element on its own, so without this the first
+          // click only opened the field and a second click was needed to
+          // actually type into it. mounted() fires once per v-if
+          // true-flip, i.e. exactly when the field appears.
+          .directive('focus', {
+            mounted(el) {
+              el.focus();
+              if (typeof el.select === 'function') el.select();
+            },
+          })
+          .mount(root);
       }
     },
   };
diff --git a/web/modules/custom/figli_compta_ledger/templates/figli-compta-home.html.twig b/web/modules/custom/figli_compta_ledger/templates/figli-compta-home.html.twig
index 3f31e9f..2dbf3b4 100644
--- a/web/modules/custom/figli_compta_ledger/templates/figli-compta-home.html.twig
+++ b/web/modules/custom/figli_compta_ledger/templates/figli-compta-home.html.twig
@@ -147,6 +147,7 @@
             <td>
               <input
                 v-if="isEditingCell(item, 'client')"
+                v-focus
                 type="text"
                 class="figli-inline-input"
                 list="figli-client-datalist"
@@ -160,6 +161,7 @@
             <td>
               <select
                 v-if="editingTypeId === item.id"
+                v-focus
                 class="figli-type-select"
                 :value="item.type"
                 @change="saveType(item, $event)"
@@ -178,6 +180,7 @@
             <td>
               <input
                 v-if="isEditingCell(item, 'facture')"
+                v-focus
                 type="text"
                 class="figli-inline-input"
                 :value="item.facture"
@@ -190,6 +193,7 @@
             <td class="figli-libelle">
               <input
                 v-if="isEditingCell(item, 'libelle')"
+                v-focus
                 type="text"
                 class="figli-inline-input"
                 :value="item.libelle"