Auto-focus click-to-edit fields instead of requiring a second click
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.
This commit is contained in:
@@ -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);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user