search

awcodes / alpine-floating-ui

Add Floating UI functionality to Alpine 3.x components.
MIT License
79 stars 3 forks source link

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

Open petermarkovich opened 5 months ago

petermarkovich commented 5 months ago

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:

https://github.com/awcodes/alpine-floating-ui/assets/44711941/776c9333-1e68-4523-8ab0-64609767246f

and older:

https://github.com/awcodes/alpine-floating-ui/assets/44711941/08e23d28-91c2-43f6-b06d-c37d498c49a3

awcodes commented 5 months ago

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.

https://github.com/awcodes/alpine-floating-ui/assets/3596800/370cc874-3431-4143-80fa-b4029cd41ed0

awcodes commented 5 months ago

Ok. Have some feedback. See the response at https://github.com/alpinejs/alpine/discussions/4105#discussioncomment-8883114