From 5bad67348532aca16c46a59f099d4d75dd099467 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20Tajes=20Vidal?= Date: Fri, 30 Aug 2024 10:58:50 +0200 Subject: [PATCH] NEXT-38027 - fix datepicker not emiting value when manually entered --- packages/component-library/package.json | 2 +- .../mt-datepicker.interactive.stories.ts | 32 +++++++++++++++++++ .../form/mt-datepicker/mt-datepicker.vue | 3 +- pnpm-lock.yaml | 19 +++++++---- 4 files changed, 47 insertions(+), 9 deletions(-) diff --git a/packages/component-library/package.json b/packages/component-library/package.json index 3cf41e806..f0b396fcd 100644 --- a/packages/component-library/package.json +++ b/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", diff --git a/packages/component-library/src/components/form/mt-datepicker/mt-datepicker.interactive.stories.ts b/packages/component-library/src/components/form/mt-datepicker/mt-datepicker.interactive.stories.ts index 02a2b7d43..8f4d850e1 100644 --- a/packages/component-library/src/components/form/mt-datepicker/mt-datepicker.interactive.stories.ts +++ b/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"); + }, +}; diff --git a/packages/component-library/src/components/form/mt-datepicker/mt-datepicker.vue b/packages/component-library/src/components/form/mt-datepicker/mt-datepicker.vue index 759cc0840..3fd6ec829 100644 --- a/packages/component-library/src/components/form/mt-datepicker/mt-datepicker.vue +++ b/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; }); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 45228c914..6bc18b5a8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -260,8 +260,8 @@ importers: specifier: ^2.0.0 version: 2.0.1(date-fns@2.30.0) flatpickr: - specifier: 4.6.3 - version: 4.6.3 + specifier: 4.6.13 + version: 4.6.13 focus-trap: specifier: ^7.5.4 version: 7.5.4 @@ -6876,8 +6876,8 @@ packages: resolution: {integrity: sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==} hasBin: true - flatpickr@4.6.3: - resolution: {integrity: sha512-007VucCkqNOMMb9ggRLNuJowwaJcyOh4sKAFcdGfahfGc7JQbf94zSzjdBq/wVyHWUEs5o3+idhFZ0wbZMRmVQ==} + flatpickr@4.6.13: + resolution: {integrity: sha512-97PMG/aywoYpB4IvbvUJi0RQi8vearvU0oov1WW3k0WZPBMrTQVqekSX5CjSG/M4Q3i6A/0FKXC7RyAoAUUSPw==} flatted@3.3.1: resolution: {integrity: sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==} @@ -10211,7 +10211,7 @@ packages: puppeteer@12.0.1: resolution: {integrity: sha512-YQ3GRiyZW0ddxTW+iiQcv2/8TT5c3+FcRUCg7F8q2gHqxd5akZN400VRXr9cHQKLWGukmJLDiE72MrcLK9tFHQ==} engines: {node: '>=10.18.1'} - deprecated: < 22.6.4 is no longer supported + deprecated: < 22.8.2 is no longer supported pure-color@1.3.0: resolution: {integrity: sha512-QFADYnsVoBMw1srW7OVKEYjG+MbIa49s54w1MA1EDY6r2r/sTcKKYqRX1f4GYvnXP7eN/Pe9HFcX+hwzmrXRHA==} @@ -12331,6 +12331,9 @@ packages: vue-component-type-helpers@2.0.21: resolution: {integrity: sha512-3NaicyZ7N4B6cft4bfb7dOnPbE9CjLcx+6wZWAg5zwszfO4qXRh+U52dN5r5ZZfc6iMaxKCEcoH9CmxxoFZHLg==} + vue-component-type-helpers@2.1.2: + resolution: {integrity: sha512-URuxnrOhO9lUG4LOAapGWBaa/WOLDzzyAbL+uKZqT7RS+PFy0cdXI2mUSh7GaMts6vtHaeVbGk7trd0FPJi65Q==} + vue-demi@0.14.8: resolution: {integrity: sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==} engines: {node: '>=12'} @@ -17304,7 +17307,7 @@ snapshots: ts-dedent: 2.2.0 type-fest: 2.19.0 vue: 3.4.21(typescript@5.2.2) - vue-component-type-helpers: 2.0.21 + vue-component-type-helpers: 2.1.2 transitivePeerDependencies: - encoding - prettier @@ -21860,7 +21863,7 @@ snapshots: flat@5.0.2: {} - flatpickr@4.6.3: {} + flatpickr@4.6.13: {} flatted@3.3.1: {} @@ -28559,6 +28562,8 @@ snapshots: vue-component-type-helpers@2.0.21: {} + vue-component-type-helpers@2.1.2: {} + vue-demi@0.14.8(vue@3.4.21(typescript@5.2.2)): dependencies: vue: 3.4.21(typescript@5.2.2)