rahix/openflexure-microscope-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix property control when loosing focus

Browse source
This commit is contained in:
Julian Stirling 2026-02-15 18:58:15 +00:00
parent 015d6c5f03
commit ca0b6c02d2
1 changed files with 17 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

28
webapp/src/components/labThingsComponents/inputFromSchema.vue
View file

@ -4,11 +4,12 @@
>{{ label }} >{{ label }}
<div class="input-and-buttons-container"> <div class="input-and-buttons-container">
<input <input
ref="numericalInput"
v-model="internalValue" v-model="internalValue"
class="uk-form-small numeric-setting-line-input" class="uk-form-small numeric-setting-line-input"
:class="{ edited: isEdited, flash: animateUpdate }" :class="{ edited: isEdited, flash: animateUpdate }"
type="number" type="number"
@focusin="focusIn" @input="grabFocus"
@focusout="focusOut" @focusout="focusOut"
@keydown="keyDown" @keydown="keyDown"
@animationend="animationEnd" @animationend="animationEnd"
@ -39,8 +40,7 @@
class="uk-form-small numeric-setting-line-input" class="uk-form-small numeric-setting-line-input"
:class="{ edited: isEdited, flash: animateUpdate }" :class="{ edited: isEdited, flash: animateUpdate }"
type="number" type="number"
@input="updateIsEdited" @input="grabFocus"
@focusin="focusIn"
@focusout="focusOut" @focusout="focusOut"
@keydown="keyDown" @keydown="keyDown"
@animationend="animationEnd" @animationend="animationEnd"
@ -58,8 +58,7 @@
class="uk-form-small numeric-setting-line-input" class="uk-form-small numeric-setting-line-input"
:class="{ edited: isEdited, flash: animateUpdate }" :class="{ edited: isEdited, flash: animateUpdate }"
type="number" type="number"
@input="updateIsEdited" @input="grabFocus"
@focusin="focusIn"
@focusout="focusOut" @focusout="focusOut"
@keydown="keyDown" @keydown="keyDown"
@animationend="animationEnd" @animationend="animationEnd"
@ -76,7 +75,6 @@
class="uk-form-small numeric-setting-line-input" class="uk-form-small numeric-setting-line-input"
:class="{ edited: isEdited, flash: animateUpdate }" :class="{ edited: isEdited, flash: animateUpdate }"
type="text" type="text"
@focusin="focusIn"
@focusout="focusOut" @focusout="focusOut"
@keydown="keyDown" @keydown="keyDown"
@animationend="animationEnd" @animationend="animationEnd"
@ -214,7 +212,7 @@ export default {
deep: true, deep: true,
handler() { handler() {
// Fire updateIsEdited on both modelValue and internal modelValue change, // Fire updateIsEdited on both modelValue and internal modelValue change,
// as change in modelValue may not causse internalValue to change. // as change in modelValue may not cause internalValue to change.
this.updateIsEdited(); this.updateIsEdited();
this.resetInternalValue(); this.resetInternalValue();
}, },
@ -245,6 +243,7 @@ export default {
this.internalValue = JSON.parse(JSON.stringify(this.modelValue)); this.internalValue = JSON.parse(JSON.stringify(this.modelValue));
}, },
requestUpdate: async function () { requestUpdate: async function () {
this.internalValue = this.modelValue;
this.$emit("requestUpdate"); this.$emit("requestUpdate");
}, },
sendValue: async function () { sendValue: async function () {
@ -256,12 +255,19 @@ export default {
this.sendValue(); this.sendValue();
} }
}, },
focusIn: function (event) { /** Grab the browser focus.
this.valueOnEnter = event.target.modelValue; *
* This is needed for numerical elements to be in focus when a spinner
* is clicked so that the data sends when focus is lost.
*/
grabFocus(event) {
event.target.focus();
// This is needed for number objects and number arrays
this.updateIsEdited();
}, },
focusOut: function (event) { focusOut: function (event) {
if (this.valueOnEnter != event.target.modelValue) { if (this.modelValue != event.target.value) {
this.sendValue(event.target.modelValue); this.sendValue(event.target.value);
} }
}, },
keyDown: function (event) { keyDown: function (event) {