fix(ui): fix popover positioning on open (#499)

* fix(ui): fix popover positioning on open * fix(ui): avoid inconsistent min and max date log firing in the wrong scenarios --------- Co-authored-by: luzzifoss <fedeluzzi00@gmail.com>
carrot-kpi · Nov 3, 2023 · 2026c97 · 2026c97
1 parent ba55748
commit 2026c97
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 2 deletions.
diff --git a/.changeset/rude-penguins-tan.md b/.changeset/rude-penguins-tan.md
@@ -0,0 +1,6 @@
+---
+"@carrot-kpi/ui": patch
+---
+
+Do not fire inconsistent min and max date log if both min and max dates are not
+specified.
diff --git a/.changeset/shaggy-spoons-hammer.md b/.changeset/shaggy-spoons-hammer.md
@@ -0,0 +1,5 @@
+---
+"@carrot-kpi/ui": patch
+---
+
+Force popover position update on open.
diff --git a/packages/ui/src/components/date-time-input/picker/index.tsx b/packages/ui/src/components/date-time-input/picker/index.tsx
@@ -99,7 +99,11 @@ export const DateTimePicker = ({
         setMin(updatedMin);
         setMax(updatedMax);
 
-        if (dayjs(updatedMin).isAfter(dayjs(updatedMax))) {
+        if (
+            updatedMin &&
+            updatedMax &&
+            dayjs(updatedMin).isAfter(dayjs(updatedMax))
+        ) {
             setMin(updatedMax);
             console.warn("inconsistent min and max values", {
                 min: updatedMin?.toISOString(),

diff --git a/packages/ui/src/components/popover.tsx b/packages/ui/src/components/popover.tsx
@@ -3,6 +3,7 @@ import React, {
     type ReactElement,
     type ReactNode,
     useState,
+    useEffect,
 } from "react";
 import { usePopper } from "react-popper";
 import { type Placement } from "@popperjs/core";
@@ -54,7 +55,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
     ): ReactElement {
         const [popper, setPopper] = useState<HTMLDivElement | null>(null);
 
-        const { styles, attributes } = usePopper(anchor, popper, {
+        const { styles, attributes, update } = usePopper(anchor, popper, {
             placement,
             modifiers: [
                 {
@@ -64,6 +65,10 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
             ],
         });
 
+        useEffect(() => {
+            if (open && update) update();
+        }, [open, update]);
+
         return (
             <div
                 ref={(element) => {