🎨 Popover legger seg nå ikke over Input i Datepicker (#2349)

* 🎨 Popover legger seg nå ikke over Input i Datepicker * Update .changeset/eighty-pants-switch.md * 📝 Yarn sync * 📝 Yarn sync
navikt · Oct 10, 2023 · e77568f · e77568f
1 parent fcbf6ea
commit e77568f
Show file tree

Hide file tree

Showing 5 changed files with 3,222 additions and 2,400 deletions.
diff --git a/.changeset/eighty-pants-switch.md b/.changeset/eighty-pants-switch.md
@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+Datepicker: Popover legger seg nå ikke ovenfor input
diff --git a/@navikt/core/react/src/date/datepicker/DatePicker.tsx b/@navikt/core/react/src/date/datepicker/DatePicker.tsx
@@ -257,6 +257,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
               strategy={strategy}
               className="navds-date__popover"
               bubbleEscape={bubbleEscape}
+              flip={false}
             >
               <DayPicker
                 locale={getLocaleFromString(locale)}

diff --git a/@navikt/core/react/src/date/monthpicker/MonthPicker.tsx b/@navikt/core/react/src/date/monthpicker/MonthPicker.tsx
@@ -211,6 +211,7 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
               className="navds-date navds-date__popover"
               strategy={strategy}
               bubbleEscape={bubbleEscape}
+              flip={false}
             >
               <RootProvider
                 locale={getLocaleFromString(locale)}

diff --git a/@navikt/core/react/src/popover/Popover.tsx b/@navikt/core/react/src/popover/Popover.tsx
@@ -79,6 +79,11 @@ export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
    * @default false
    */
   bubbleEscape?: boolean;
+  /**
+   * Changes placement of the floating element in order to keep it in view.
+   * @default true
+   */
+  flip?: boolean;
 }
 
 interface PopoverComponent
@@ -121,6 +126,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
       offset,
       strategy: userStrategy,
       bubbleEscape = false,
+      flip: _flip = true,
       ...rest
     },
     ref
@@ -145,7 +151,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
       onOpenChange: () => onClose(),
       middleware: [
         flOffset(offset ?? (arrow ? 16 : 4)),
-        flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
+        _flip && flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
         shift({ padding: 12 }),
         flArrow({ element: arrowRef, padding: 8 }),
       ],