Fix select menu position issue 67

[franzheidl]

Summary

This PR makes sure the Select menu is always visible and usable, regardless where on a page or view the Select is located.

So far, a Select placed at the bottom of a page or view opened its menu downwards, outside of the viewport, while it should open upwards in order the be fully visible and usable.

Background:
Our Select internally uses Headless UI Select with Headless UI Float middleware to handle positioning of the menu.

Headless UI Float has two different placement strategies, flip() and autoPlacement().

Flip(), which we have used so far, should do smart auto-detection and place an element such as a menu in the desired direction, until it runs out of available space. For some reason we could not figure out in a timely manner, this does not always seem to work as expected. (https://floating-ui.com/docs/flip)

autoPlacement() however simply shows an element in the direction where the most net available space is, and appears to be working fine and robustly in all situations we have tried. (https://floating-ui.com/docs/autoplacement)

At a later point we may inspect the issue with usiing flip() further, but in order to have a robust solution now we have switched to autoPlacement().

Changes Made

• replace positioning strategy in headless ui float's middleware with autoPlacement()
• add a story to check for placment behaviour
• keep a commented out way to easily log the state of headless ui middleware for future usage

Related Issues

closes #67

[changeset-bot]

🦋 Changeset detected

Latest commit: f45438b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@cloudoperators/juno-ui-components	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

PR Preview Action v1.4.7
Preview removed because the pull request was closed.
2024-08-13 12:44 UTC