Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Opened ActionMenu does not scroll with anything other than body #3175

Closed
HDinger opened this issue Oct 29, 2024 · 3 comments
Closed

Opened ActionMenu does not scroll with anything other than body #3175

HDinger opened this issue Oct 29, 2024 · 3 comments
Labels
component: ActionMenu rails

Comments

@HDinger
Copy link
Contributor

HDinger commented Oct 29, 2024

Minimal example

<body style="height: 400px; overflow: hidden; background: beige;">
    <div id="component-preview" style="height: 300px; overflow: auto; background: lightblue;">
        <div class="preview-wrap">
            <div style="height: 400px"></div>

              <div style="position: relative">
                  <action-menu data-select-variant="none" data-view-component="true"> .... </action-menu>
             </div>

             <div style="height: 1400px"></div>
        </div>
   </div>
</body>

Actual behavior

  • When opening the menu and scrolling, the menu stays in place and does not scroll with the trigger button
    Oct-29-2024 15-11-40

Expected

  • The menu should always scroll together with the trigger button no matter which element is responsible for scrolling

Setup

  • Version 0.34.0
  • Browser: Chrome (130), Firefox (131)
  • OS: Mac (14.1)
@camertron
Copy link
Contributor

Hey @HDinger 👋 Wow this one really confused me! The preview you linked works fine locally, but exhibits the behavior you noticed in production. It looks like there's an issue loading the JavaScript bundle in production if you're using the primer.style domain. I think this is probably an artifact of us switching to Vite. Try the following URL, it should work better: https://primer-lookbook.github.com/view-components/lookbook/inspect/primer/alpha/action_menu/in_scroll_container/

I'll see if I can get to the bottom of this bundle loading issue.

@camertron
Copy link
Contributor

Fixed by primer/primer.style#407 and primer/primer.style#408

@wielinde
Copy link

Hi @camertron, Thank you for looking into this. @HDinger is on vacation but that topic is important so please allow me to jump in for her.

The issue described by @HDinger is not that the preview was not working (at least for us it did). The issue she is describing actually exists in the real world (OpenProject): In her example code snippet she describes a situation where the button is not scrolling with the whole body. Instead the button resides in a block that scrolls independently from the body. And then, when the menu is opened, the menu does not scroll in sync with that block (and the button).

Or to put it in other words: If you take her code and replace the linked example with her code then you will see that it is not working as expected.

Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
component: ActionMenu rails
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@wielinde @camertron @lesliecdubs @HDinger