fix(ui): fix DateTimePicker runtime errors (#702)

Co-authored-by: [email protected] <[email protected]>
cloudoperators · Jan 2, 2025 · 212e32b · 212e32b
1 parent 92719cf
commit 212e32b
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/.changeset/kind-maps-shout.md 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
@@ -268,7 +268,7 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({
       enableSeconds: enableSeconds,
       enableTime: enableTime,
       hourIncrement: hourIncrement,
-      locale: (locale || undefined) as LocaleKey | Partial<CustomLocale>,
+      locale: (locale || "default") as LocaleKey | Partial<CustomLocale>,
       maxDate: (maxDate || undefined) as DateOption,
       minDate: (minDate || undefined) as DateOption,
       minuteIncrement: minuteIncrement,
@@ -420,7 +420,7 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({
   }, [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
@@ -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()
   })