fix(component-library): round number field step values

Author: keulinho

.changeset/bright-kings-float.md

@@ -0,0 +1,5 @@
+---
+"@shopware-ag/meteor-component-library": patch
+---
+
+Fix floating-point rounding after stepping a number field.

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

@@ -90,6 +90,43 @@ describe("mt-number-field", () => {
     expect(handler).not.toHaveBeenCalled();
   });
 
+  it("rounds floating point precision errors when incrementing with the keyboard", async () => {
+    const updateHandler = vi.fn();
+
+    render(MtNumberField, {
+      props: {
+        modelValue: 1.62,
+        step: 0.01,
+        digits: 2,
+        "onUpdate:modelValue": updateHandler,
+      },
+    });
+
+    await userEvent.click(screen.getByRole("textbox"));
+    await userEvent.keyboard("{ArrowUp}");
+
+    expect(updateHandler).toHaveBeenLastCalledWith(1.63);
+    expect((screen.getByRole("textbox") as HTMLInputElement).value).toBe("1.63");
+  });
+
+  it("rounds floating point precision errors when incrementing with the control", async () => {
+    const updateHandler = vi.fn();
+
+    render(MtNumberField, {
+      props: {
+        modelValue: 1.62,
+        step: 0.01,
+        digits: 2,
+        "onUpdate:modelValue": updateHandler,
+      },
+    });
+
+    await userEvent.click(screen.getByRole("button", { name: "Increase" }));
+
+    expect(updateHandler).toHaveBeenLastCalledWith(1.63);
+    expect((screen.getByRole("textbox") as HTMLInputElement).value).toBe("1.63");
+  });
+
   it("is not possible to increment the value by pressing the increment button when inheritance is linked", async () => {
     // ASSERT
     const handler = vi.fn();

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

@@ -380,15 +380,16 @@ export default defineComponent({
     },
 
     increaseNumberByStep() {
-      this.computeValue((Number(this.currentValue) + this.realStep).toString());
-      this.rawUserInput = null;
-
-      this.$emit("update:modelValue", this.currentValue);
+      this.changeNumberByStep(this.realStep);
     },
 
     decreaseNumberByStep() {
-      // @ts-expect-error - wrong type because of component extends
-      this.computeValue((this.currentValue - this.realStep).toString());
+      this.changeNumberByStep(-this.realStep);
+    },
+
+    changeNumberByStep(step: number) {
+      const steppedValue = Number(this.currentValue) + step;
+      this.computeValue(this.roundToDigits(steppedValue.toString(), this.digits).toString());
       this.rawUserInput = null;
 
       this.$emit("update:modelValue", this.currentValue);