Merge pull request #13260 from davelopez/fix_form_number_slider_update

FormNumber: notify value change on slider change

client/src/components/Form/Elements/FormNumber.test.js

@@ -1,7 +1,7 @@
 import { mount } from "@vue/test-utils";
+import flushPromises from "flush-promises";
 import { getLocalVue } from "jest/helpers";
 import FormNumber from "./FormNumber";
-import flushPromises from "flush-promises";
 
 const localVue = getLocalVue();
 
@@ -49,6 +49,7 @@ describe("FormInput", () => {
 
     it("range should be respected", async () => {
         const checkOutOfRangeAlert = async (number) => {
+            const props = { value: 50, type: "float", min: 10, max: 100 };
             const wrapper = await mountFormNumber(props);
             const input = await getInput(wrapper);
             input.setValue(number);
@@ -60,20 +61,8 @@ describe("FormInput", () => {
             wrapper.destroy();
         };
 
-        const numberWithinRange = 75;
         const numberBiggerThanRange = [110, Number.MAX_VALUE];
         const numberSmallerThanRange = [1, 0, -1, Number.MIN_VALUE];
-        const props = { value: 50, type: "float", min: 10, max: 100 };
-
-        // const wrapper = await mountFormNumber(props);
-        const wrapper = await mountFormNumber(props);
-
-        const input = await getInput(wrapper);
-
-        // both inputs should have the same value
-        input.setValue(numberWithinRange);
-        const inputRange = await getInputRange(wrapper);
-        expect(parseFloat(inputRange.element.value)).toBe(numberWithinRange);
 
         //alert should be shown
         for (const value of numberSmallerThanRange) {

client/src/components/Form/Elements/FormNumber.vue

@@ -1,11 +1,6 @@
 <template>
     <div>
-        <b-alert
-            class="mt-2"
-            v-if="errorMessage"
-            :show="dismissCountDown"
-            variant="info"
-            @dismissed="dismissCountDown = 0">
+        <b-alert class="mt-2" v-if="errorMessage" :show="dismissCountDown" variant="info" @dismissed="resetAlert">
             {{ errorMessage }}
         </b-alert>
         <b-row align-v="center">
@@ -56,17 +51,29 @@ export default {
             dismissCountDown: 0,
             errorMessage: "",
             fractionWarning: "This output doesn't allow fractions!",
-            currentValue: this.value,
             decimalPlaces: this.isInteger ? 0 : this.getNumberOfDecimals(this.value),
         };
     },
     computed: {
+        currentValue: {
+            get() {
+                return this.value;
+            },
+            set(newVal, oldVal) {
+                if (newVal !== oldVal) {
+                    this.$emit("input", newVal);
+                }
+            },
+        },
         isRangeValid() {
             return !isNaN(this.min) && !isNaN(this.max) && this.max > this.min;
         },
         isInteger() {
             return this.type.toLowerCase() === "integer";
         },
+        isFloat() {
+            return !this.isInteger;
+        },
         /**
          * Dynamically sets the step value depending on the
          * current value precision when float number.
@@ -93,17 +100,14 @@ export default {
             }
         },
         onInputChange(value) {
-            // hide error message after value has changed
-            this.dismissCountDown = 0;
-            if (this.isRangeValid && (value > this.max || value < this.min)) {
-                const errorMessage = this.getOutOfRangeWarning(value);
+            this.resetAlert();
+            if (this.isOutOfRange(value)) {
+                this.showOutOfRangeWarning(value);
                 this.currentValue = value > this.max ? this.max : this.min;
-                this.showAlert(errorMessage);
             }
-            if (!this.isInteger) {
+            if (this.isFloat) {
                 this.decimalPlaces = this.getNumberOfDecimals(this.currentValue);
             }
-            this.$emit("input", this.currentValue);
         },
         showAlert(error) {
             if (error) {
@@ -111,8 +115,15 @@ export default {
                 this.dismissCountDown = this.dismissSecs;
             }
         },
-        getOutOfRangeWarning(value) {
-            return `${value} is out of ${this.min} - ${this.max} range!`;
+        isOutOfRange(value) {
+            return this.isRangeValid && (value > this.max || value < this.min);
+        },
+        showOutOfRangeWarning(value) {
+            const warningMessage = `${value} is out of ${this.min} - ${this.max} range!`;
+            this.showAlert(warningMessage);
+        },
+        resetAlert() {
+            this.dismissCountDown = 0;
         },
         /**
          * https://stackoverflow.com/questions/10454518/javascript-how-to-retrieve-the-number-of-decimals-of-a-string-number