A bug with the appearance of a drop-down/panel

[petermarkovich]

The drop-down list begins its movement somewhere outside the screen or bottom of the screen.

The bug appeared in the latest version of the commit. It's not in this one LINK

<script type="module">
    import FloatingUI from 'js/floating-alpine.esm.js';

    document.addEventListener("alpine:initializing", () => {
        FloatingUI(window.Alpine);
    });
</script>

@click="$refs.panel.toggle"
@click.away="$refs.panel.close()"


<div x-ref='panel' x-float.placement.bottom-start.flip.offset
             class="absolute w-full z-20 rounded-lg shadow-grey-2xl bg-white overflow-hidden transition-all duration-500 max-h-72 overflow-y-auto">
             content
             </div>

latest ver:

2024-03-14.13.58.28.mov

and older:

2024-03-14.14.03.17.mov

[awcodes]

Thank you for being patient with this.

I've managed to track down the issue to either a bug in the transition part of Alpine or a bug in the computedPosition method of Floating UI.

The same behavior can be seen in Alpine's anchor plugin.

Screen.Recording.2024-03-20.at.4.59.35.PM.mov

[awcodes]

Ok. Have some feedback. See the response at alpinejs/alpine#4105 (comment)