fix(component-library): prevent user from changing value of number field with linked inheritance

.changeset/rich-pots-tease.md

@@ -0,0 +1,5 @@
+---
+"@shopware-ag/meteor-component-library": patch
+---
+
+Disable number field when value is inherited

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

@@ -0,0 +1,71 @@
+import { render, screen } from "@testing-library/vue";
+import MtNumberField from "./mt-number-field.vue";
+import { userEvent } from "@storybook/test";
+
+describe("mt-number-field", () => {
+  it("is not possible to change the value when inheritance is linked", async () => {
+    // ARRANGE
+    const handler = vi.fn();
+
+    render(MtNumberField, {
+      props: {
+        modelValue: 0,
+        isInheritanceField: true,
+        isInherited: true,
+        // @ts-expect-error -- Event exist, but type is not defined via TypeScript
+        onInputChange: handler,
+      },
+    });
+
+    // ACT
+    await userEvent.type(screen.getByRole("textbox"), "1");
+
+    // ASSERT
+    expect(screen.getByRole("textbox")).toBeDisabled();
+
+    expect(screen.getByRole("textbox")).toHaveValue("0");
+    expect(handler).not.toHaveBeenCalled();
+  });
+
+  it("is not possible to increment the value by pressing the increment button when inheritance is linked", async () => {
+    // ASSERT
+    const handler = vi.fn();
+
+    render(MtNumberField, {
+      props: {
+        modelValue: 0,
+        isInheritanceField: true,
+        isInherited: true,
+        // @ts-expect-error -- Event exist, but type is not defined via TypeScript
+        "onUpdate:modelValue": handler,
+      },
+    });
+
+    // ACT
+    await userEvent.click(screen.getByRole("button", { name: "Increase" }));
+
+    expect(screen.getByRole("textbox")).toHaveValue("0");
+    expect(handler).not.toHaveBeenCalled();
+  });
+
+  it("is not possible to decrement the value by pressing the decrement button when inheritance is linked", async () => {
+    // ASSERT
+    const handler = vi.fn();
+
+    render(MtNumberField, {
+      props: {
+        modelValue: 0,
+        isInheritanceField: true,
+        isInherited: true,
+        // @ts-expect-error -- Event exist, but type is not defined via TypeScript
+        "onUpdate:modelValue": handler,
+      },
+    });
+
+    // ACT
+    await userEvent.click(screen.getByRole("button", { name: "Decrease" }));
+
+    expect(screen.getByRole("textbox")).toHaveValue("0");
+    expect(handler).not.toHaveBeenCalled();
+  });
+});

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

@@ -2,7 +2,7 @@
   <mt-base-field
     class="mt-number-field"
     :class="$attrs.class"
-    :disabled="disabled"
+    :disabled="disabled || isInherited"
     :required="required"
     :is-inherited="isInherited"
     :is-inheritance-field="isInheritanceField"
@@ -31,7 +31,7 @@
         :id="createInputId(identification)"
         type="text"
         :name="identification"
-        :disabled="disabled"
+        :disabled="disabled || isInherited"
         :value="stringRepresentation"
         :placeholder="placeholder"
         :class="numberAlignEnd ? 'mt-number-field__align-end' : ''"
@@ -46,7 +46,7 @@
       <div class="mt-number-field__controls" :class="controlClasses">
         <button
           @click="increaseNumberByStep"
-          :disabled="disabled"
+          :disabled="disabled || isInherited"
           :aria-label="t('increaseButton')"
           data-testid="mt-number-field-increase-button"
         >
@@ -55,7 +55,7 @@
 
         <button
           @click="decreaseNumberByStep"
-          :disabled="disabled"
+          :disabled="disabled || isInherited"
           :aria-label="t('decreaseButton')"
           data-testid="mt-number-field-decrease-button"
         >