Popovers aren't scrolling with the page and should instead lock scroll when open

[lghcdh]

I looked to see if this was ane existing issue, but could not see one.

Using the same code provided here: https://fluxui.dev/layouts/sidebar

When opening a popover menu, it is never fixed to to the parent element, even if the parent has a relative class applied to it.

Attached video shows this in action:

Untitled.Video.September.26.2024.7_04.PM.mp4

[omniith]

Yes, facing the same issue. Waiting to see the solution for this.

[calebporzio]

This a really tough one and I wondered what other libraries do, and most libraries disable scrolling when a dropdown of any kind is open to prevent things like this.

Unforunately implementing scroll-lock isn't trivial and could be source of more bugs so I want to make sure we want to introduce it before we do, but just pinging here to let you all know that it's on my mind and will try to address it shortly.

[ahscc]

Just ran into this issue trying to implement a dropdown in the sidebar. Are there any recommended work arounds?

[relaypilot]

Closing the dropdown on a scroll event could be a good solution?

[sertxudev]

@lghcdh I ran into this problem a few weeks ago, the solution for me was to make the main content scrollable, not the whole page scrollable. I don't know if I make myself clear, I don't have the code in front of me right now. 😅

[LasseRafn]

actually dig the idea of scroll = close dropdown. Maybe after scrolling X pixels, it closes (to prevent small accidental scrolls from closing)

[RyanPaiva56]

actually dig the idea of scroll = close dropdown. Maybe after scrolling X pixels, it closes (to prevent small accidental scrolls from closing)

I think most libraries do close by default when scrolling, some make this optional just in case you want a popover to persist. If you don't close, it scrolls with the page. I don't think scroll locking in any scenario is a good idea.

[calebporzio]

Intresting, so maybe there's two behaviors:
A) close on scroll
B) lock scroll

Maybe tooltips and popovers close on scroll, and select dropdowns and modals lock scroll?

Curious what other libraries do. Thanks for all the thoughts on this.

[itsgrimace]

This is most likely related. Things get whacky when you add a tooltip into a modal, the size of the modal box changes and adds scrolling overflow to x and y axis. See example.

<div>
    <flux:modal.trigger name="edit-profile">
        <flux:button>Edit profile</flux:button>
    </flux:modal.trigger>
    
    <flux:modal name="edit-profile" class="md:w-96 space-y-6">
        <div>
            <flux:heading size="lg">Update profile</flux:heading>
            <flux:subheading>Make changes to your personal details.</flux:subheading>
        </div>
    
        <flux:input label="Name" placeholder="Your name" />
    
        <flux:input label="Date of birth" type="date" />
    
        <div class="flex">
            <flux:spacer />
            <flux:tooltip content="Settings">
                <flux:button type="submit" variant="primary">Save changes</flux:button>
            </flux:tooltip>
        </div>
    </flux:modal>
</div>