fix(component-library): hide protocol when re-rendering the url field

shopware · Feb 4, 2025 · 0c51ffa · 0c51ffa
1 parent a5bf6e6
commit 0c51ffa
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 5 deletions.
diff --git a/packages/component-library/src/components/form/mt-url-field/mt-url-field.spec.ts b/packages/component-library/src/components/form/mt-url-field/mt-url-field.spec.ts
@@ -4,6 +4,23 @@ import { render, screen } from "@testing-library/vue";
 import userEvent from "@testing-library/user-event";
 
 describe("mt-url-field", async () => {
+  it("hides the protcol in the input when re-rendering", async () => {
+    // ARRANGE
+    const { rerender } = render(MtUrlField, {
+      props: {
+        modelValue: "https://www.example.com",
+      },
+    });
+
+    // ACT
+    await rerender({
+      modelValue: "http://www.example.com",
+    });
+
+    // ASSERT
+    expect(screen.getByRole("textbox")).toHaveValue("www.example.com");
+  });
+
   it("shows the domain to the user", async () => {
     // ARRANGE
     render(MtUrlField, {

diff --git a/packages/component-library/src/components/form/mt-url-field/mt-url-field.vue b/packages/component-library/src/components/form/mt-url-field/mt-url-field.vue
@@ -146,11 +146,16 @@ export default defineComponent({
     },
   },
 
-  created() {
-    // @ts-expect-error -- modelValue is always a string
-    const result = this.checkInput(this.currentValue);
-
-    this.currentValue = result;
+  watch: {
+    modelValue: {
+      handler() {
+        // @ts-expect-error -- modelValue is always a string
+        const result = this.checkInput(this.currentValue);
+
+        this.currentValue = result;
+      },
+      immediate: true,
+    },
   },
 
   methods: {