From 212e32b9069e3cba0e40231ff0faef1296e94389 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Grzegorz=20Ja=C5=9Bkiewicz?= Date: Thu, 2 Jan 2025 11:20:54 +0100 Subject: [PATCH] fix(ui): fix DateTimePicker runtime errors (#702) Co-authored-by: gjaskiewicz@objectivity.co.uk --- .changeset/kind-maps-shout.md | 5 +++++ .../DateTimePicker/DateTimePicker.component.tsx | 4 ++-- .../src/components/DateTimePicker/DateTimePicker.test.tsx | 8 +++++--- 3 files changed, 12 insertions(+), 5 deletions(-) create mode 100644 .changeset/kind-maps-shout.md diff --git a/.changeset/kind-maps-shout.md b/.changeset/kind-maps-shout.md new file mode 100644 index 000000000..317959bf2 --- /dev/null +++ b/.changeset/kind-maps-shout.md @@ -0,0 +1,5 @@ +--- +"@cloudoperators/juno-ui-components": patch +--- + +Fix errors in DateTimePicker diff --git a/packages/ui-components/src/components/DateTimePicker/DateTimePicker.component.tsx b/packages/ui-components/src/components/DateTimePicker/DateTimePicker.component.tsx index 8b59d346a..6c9d42435 100644 --- a/packages/ui-components/src/components/DateTimePicker/DateTimePicker.component.tsx +++ b/packages/ui-components/src/components/DateTimePicker/DateTimePicker.component.tsx @@ -268,7 +268,7 @@ export const DateTimePicker: React.FC = ({ enableSeconds: enableSeconds, enableTime: enableTime, hourIncrement: hourIncrement, - locale: (locale || undefined) as LocaleKey | Partial, + locale: (locale || "default") as LocaleKey | Partial, maxDate: (maxDate || undefined) as DateOption, minDate: (minDate || undefined) as DateOption, minuteIncrement: minuteIncrement, @@ -420,7 +420,7 @@ export const DateTimePicker: React.FC = ({ }, [hourIncrement]) useEffect(() => { - flatpickrInstanceRef.current?.set("locale", locale) + flatpickrInstanceRef.current?.set("locale", locale || "default") }, [locale]) useEffect(() => { diff --git a/packages/ui-components/src/components/DateTimePicker/DateTimePicker.test.tsx b/packages/ui-components/src/components/DateTimePicker/DateTimePicker.test.tsx index b5f66cdfc..a0eb14049 100644 --- a/packages/ui-components/src/components/DateTimePicker/DateTimePicker.test.tsx +++ b/packages/ui-components/src/components/DateTimePicker/DateTimePicker.test.tsx @@ -4,7 +4,7 @@ */ import React from "react" -import { cleanup, render, screen, waitFor } from "@testing-library/react" +import { cleanup, render, screen, waitFor, act } from "@testing-library/react" import userEvent from "@testing-library/user-event" import { DateTimePicker } from "./index" import { PortalProvider } from "../PortalProvider/PortalProvider.component" @@ -863,8 +863,10 @@ describe("DateTimePicker", () => { const input = screen.getByRole("textbox") await waitFor(() => user.click(input)) - const focusEvent = new FocusEvent("focus", { bubbles: true, composed: true }) - document.body.dispatchEvent(focusEvent) + act(() => { + const focusEvent = new FocusEvent("focus", { bubbles: true, composed: true }) + document.body.dispatchEvent(focusEvent) + }) expect(mockOnClose).toHaveBeenCalled() })