Fix select menu position issue 67

.changeset/fix-select-menu-bottom-placment.md

@@ -0,0 +1,5 @@
+---
+"@cloudoperators/juno-ui-components": patch
+---
+
+Fix select menu position issue 67 by switching from `flip()` to `autoPlacment()` placement strategy in headless ui middleware.

packages/ui-components/src/components/Select/Select.component.js

@@ -11,7 +11,7 @@
 import { Spinner } from "../Spinner/Spinner.component"
 import { FormHint } from "../FormHint/FormHint.component"
 import { Float } from "@headlessui-float/react"
-import { flip, offset, shift, size } from "@floating-ui/react-dom"
+import { autoPlacement, flip, offset, shift, size } from "@floating-ui/react-dom"
 import { usePortalRef } from "../PortalProvider/index"
 import { createPortal } from "react-dom"
 import "./select.scss"
@@ -169,8 +169,14 @@
   // Headless-UI-Float Middleware
   const middleware = [
     offset(4),
-    shift(),
-    flip(),
+    autoPlacement((state) =>
+      // Uncomment to examine Headless-UI-Floating middleware:
+      // console.log(state),
+      ({
+        crossAxis: true,
+        allowedPlacements: ["bottom", "top"],
+      })
+    ),
     size({
       boundary: "viewport",
       apply({ availableWidth, availableHeight, elements }) {
@@ -181,6 +187,7 @@
         })
       },
     }),
+    shift(),
   ]
 
   // This function is used to determine what to render for the selected options in the Select Toggle in multi-select case.

packages/ui-components/src/components/Select/Select.stories.js

@@ -84,6 +84,13 @@
   children: PropTypes.node,
 }
 
+const BottomPositionTemplate = ({ parentStyles, children, ...args }) => (
+  <div style={parentStyles}>
+    Bottom Positioned Select
+    <Select {...args}>{children}</Select>
+  </div>
+)
+
 export const Default = {
   render: Template,
   args: {
@@ -535,3 +542,19 @@
     ],
   },
 }
+
+export const BottomPositionedSelect = {
+  render: BottomPositionTemplate,
+  args: {
+    parentStyles: {
+      position: "absolute",
+      bottom: "0",
+    },
+    children: [
+      <SelectOption key="1" value="Option 1" />,
+      <SelectOption key="2" value="Option 2" />,
+      <SelectOption key="3" value="Option 3" />,
+      <SelectOption key="4" value="Option 4" />,
+    ],
+  },
+}