NEXT-38027 - fix datepicker not emiting value when manually entered

.changeset/modern-numbers-relax.md

@@ -0,0 +1,5 @@
+---
+"@shopware-ag/meteor-component-library": patch
+---
+
+Updated flatpickr dependency to the latest version to fix mt-datepicker issue when date typed manually

packages/component-library/package.json

@@ -39,7 +39,7 @@
     "@vueuse/core": "^10.7.2",
     "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.0",
-    "flatpickr": "4.6.3",
+    "flatpickr": "4.6.13",
     "focus-trap": "^7.5.4",
     "inter-ui": "^3.19.3",
     "lodash-es": "^4.17.21",

packages/component-library/src/components/form/mt-datepicker/mt-datepicker.interactive.stories.ts

@@ -123,6 +123,7 @@ export const VisualTestTimeInputValue: MtDatepickerStory = {
     // Enter 22 as minute
     await userEvent.clear(calendar.getByLabelText("Minute"));
     await userEvent.type(calendar.getByLabelText("Minute"), "22");
+    await userEvent.type(canvas.getByRole("textbox"), "{enter}");
 
     // Click label to close datepicker
     await userEvent.click(canvas.getByText(args.label!));
@@ -168,3 +169,34 @@ export const TestDisabledDoesNotOpenFlatpickr: MtDatepickerStory = {
     expect((canvas.getByRole("textbox") as HTMLInputElement).disabled).toBe(true);
   },
 };
+
+export const TestManualInput: MtDatepickerStory = {
+  name: "Should emit date value when manually typed",
+  args: {
+    label: "Date value",
+    dateType: "date",
+    modelValue: null,
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByRole("textbox");
+
+    // Focus input
+    await userEvent.click(input);
+
+    // Clear input
+    await userEvent.clear(input);
+
+    // Enter date manually
+    await userEvent.type(input, "2024-12-24");
+
+    // Click label to close datepicker
+    await userEvent.click(canvas.getByText(args.label!));
+
+    // Expect input value
+    expect((input as HTMLInputElement).value).toBe("2024-12-24");
+
+    // Expect input event is triggered
+    expect(args.updateModelValue).toHaveBeenCalledWith("2024-12-24T00:00:00");
+  },
+};

packages/component-library/src/components/form/mt-datepicker/mt-datepicker.vue

@@ -471,7 +471,8 @@ export default defineComponent({
         this.isDatepickerOpen = true;
       });
 
-      this.flatpickrInstance.config.onClose.push(() => {
+      this.flatpickrInstance.config.onClose.push((...args) => {
+        this.emitValue(args[1]);
         this.isDatepickerOpen = false;
       });