fix: allow typing intermediate values below min/max during input (#960)

* fix: validate number on blur

* test: add unit test for number field validation

* chore: add changeset

Author: alastair-simon

.changeset/empty-days-film.md

@@ -0,0 +1,5 @@
+---
+"@shopware-ag/meteor-component-library": minor
+---
+
+fix(mt-number-field): allow typing intermediate values below min/max during input

packages/component-library/src/components/form/mt-number-field/mt-number-field.spec.ts

@@ -352,4 +352,40 @@ describe("mt-number-field", () => {
     // ASSERT
     expect(screen.getByRole("button", { name: "Decrease" })).not.toHaveFocus();
   });
+
+  it("allows typing values below the minimum value and validates on blur", async () => {
+    // ARRANGE
+    const handler = vi.fn();
+
+    render(MtNumberField, {
+      props: {
+        modelValue: 10,
+        min: 8,
+        max: 80,
+        "onUpdate:modelValue": handler,
+      },
+    });
+
+    const input = screen.getByRole("textbox");
+
+    // ACT - Type '7' (below minimum value)
+    await userEvent.clear(input);
+    await userEvent.type(input, "7");
+
+    // ASSERT - '7' should be displayed not fixed to '8'
+    expect(input).toHaveValue("7");
+
+    // ACT - Continue typing '75' to make '775' (invalid value)
+    await userEvent.type(input, "75");
+
+    // ASSERT - "775" should be displayed
+    expect(input).toHaveValue("775");
+
+    // ACT - Blur the field to trigger validation
+    await userEvent.click(document.body);
+
+    // ASSERT - Value '775' is invalid, so it should be clamped to '80'
+    expect(input).toHaveValue("80");
+    expect(handler).toHaveBeenCalledWith(80);
+  });
 });

packages/component-library/src/components/form/mt-number-field/mt-number-field.vue

@@ -314,18 +314,24 @@ export default defineComponent({
 
     onInput(event: Event) {
       // @ts-expect-error - target exists
-      let val = Number.parseFloat(event.target.value);
+      const inputValue = event.target.value;
 
-      if (!Number.isNaN(val)) {
-        if (this.max && val > this.max) {
-          val = this.max;
-        }
-        if (this.min && val < this.min) {
-          val = this.min;
-        }
+      if (inputValue === "" && this.allowEmpty) {
+        // @ts-expect-error - defined in parent
+        this.currentValue = null;
+        this.$emit("input-change", null);
+        return;
+      }
+
+      const val = Number.parseFloat(inputValue);
 
-        this.computeValue(val.toString());
+      if (!Number.isNaN(val)) {
+        this.computeValue(val.toString(), true);
         this.$emit("input-change", val);
+      } else if (inputValue === "" || inputValue === "-" || inputValue === ".") {
+        // @ts-expect-error - defined in parent
+        this.currentValue = null;
+        this.$emit("input-change", null);
       }
     },
 
@@ -342,23 +348,24 @@ export default defineComponent({
       this.$emit("update:modelValue", this.currentValue);
     },
 
-    computeValue(stringRepresentation: string) {
+    computeValue(stringRepresentation: string, skipBoundaries = false) {
       const value = this.getNumberFromString(stringRepresentation);
-      this.currentValue = this.parseValue(value);
+      this.currentValue = this.parseValue(value, skipBoundaries);
     },
 
     // @ts-expect-error - defined in parent
 
-    parseValue(value: any) {
+    parseValue(value: any, skipBoundaries = false) {
       if (value === null || Number.isNaN(value) || !Number.isFinite(value)) {
         if (this.allowEmpty) {
           return null;
         }
 
-        return this.parseValue(0);
+        return this.parseValue(0, skipBoundaries);
       }
 
-      return this.checkForInteger(this.checkBoundaries(value));
+      const processedValue = skipBoundaries ? value : this.checkBoundaries(value);
+      return this.checkForInteger(processedValue);
     },
 
     checkBoundaries(value: number) {