fix: AppSlider incorrect state (#654)

Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>
fluidd-core · May 4, 2022 · 8e59f4e · 8e59f4e
1 parent 2623902
commit 8e59f4e
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 29 deletions.
diff --git a/src/components/ui/AppSlider.vue b/src/components/ui/AppSlider.vue
@@ -20,7 +20,7 @@
         class="py-0"
       >
         <v-text-field
-          v-model="internalStringValue"
+          v-model.number="internalValue"
           :suffix="suffix"
           :rules="textRules"
           :readonly="isLocked"
@@ -33,8 +33,7 @@
           outlined
           hide-details
           @change="handleChange($event)"
-          @focus="directInput = true; $event.target.select()"
-          @blur="directInput = false"
+          @focus="$event.target.select()"
         >
           <template #prepend>
             <v-btn
@@ -87,7 +86,6 @@
       :disabled="disabled || loading || isLocked || overridden"
       dense
       hide-details
-      @start="directInput=false"
       @change="handleChange($event)"
     />
   </v-form>
@@ -148,9 +146,7 @@ export default class AppSlider extends Mixins(StateMixin) {
   valid = true
   lockState = false
   overridden = false
-  internalStringValue: string = this.value.toString()
   internalValue: number = this.value
-  directInput = false
   internalMax = this.max
   pending = false
 
@@ -165,37 +161,25 @@ export default class AppSlider extends Mixins(StateMixin) {
   }
 
   // If one of our controls updates the value.
-  @Watch('internalStringValue')
-  onInternalStringValue (value: string) {
+  @Watch('internalValue')
+  onInternalValue (value: number) {
     if (this.valid) {
-      if (
-        +value > this.max &&
-        this.overridable
-      ) {
+      if (value > this.max && this.overridable) {
         // This is overridable, and the user wants to increase
         // past the given max. So, disable the slider - and let it be.
         this.overridden = true
-        this.internalMax = +value
+        this.internalMax = value
       } else {
         // This is not overridable, or the user has reverted back to a value
         // within the given max. So, re-enable the slider - and let it be.
         this.overridden = false
         this.internalMax = this.max
       }
 
-      this.internalValue = +value
+      this.$emit('input', value)
     }
   }
 
-  @Watch('internalValue')
-  onInternalValue (value: number) {
-    if (!this.directInput) {
-      this.internalStringValue = value.toString()
-    }
-
-    this.$emit('input', value)
-  }
-
   get isLocked () {
     return this.lockState
   }
@@ -218,12 +202,12 @@ export default class AppSlider extends Mixins(StateMixin) {
     // Apply a min and max rule as per the slider.
     const rules = [
       ...this.rules,
-      (v: string) => !isNaN(+v) || this.$t('app.general.simple_form.error.invalid_number'),
-      (v: string) => +v >= this.min || this.$t('app.general.simple_form.error.min', { min: this.min })
+      (v: string | number) => !isNaN(+v) || this.$t('app.general.simple_form.error.invalid_number'),
+      (v: string | number) => +v >= this.min || this.$t('app.general.simple_form.error.min', { min: this.min })
     ]
     if (!this.overridable) {
       rules.push(
-        (v: string) => +v <= this.max || this.$t('app.general.simple_form.error.max', { max: this.max })
+        (v: string | number) => +v <= this.max || this.$t('app.general.simple_form.error.max', { max: this.max })
       )
     }
     return rules
@@ -233,8 +217,7 @@ export default class AppSlider extends Mixins(StateMixin) {
     this.lockState = this.locked
   }
 
-  handleChange (value: string | number) {
-    value = +value
+  handleChange (value: number) {
     if (
       value !== this.value &&
       !this.pending

diff --git a/src/components/widgets/outputs/OutputFan.vue b/src/components/widgets/outputs/OutputFan.vue
@@ -81,11 +81,12 @@ export default class OutputFan extends Mixins(StateMixin) {
   }
 
   rules = [
-    (v: number) => {
+    (v: string | number) => {
       const off_below = (this.fan.config?.off_below)
         ? this.fan.config.off_below * 100
         : 0
       if (!off_below) return true
+      v = +v
       return (v >= off_below || v === 0) || this.$t('app.general.simple_form.error.min_or_0', { min: off_below })
     }
   ]