patternfly
Bug - Table ActionsColumn, Dropdown - Page contents shifts on Safari after multiple interactions with kebab menus
Describe the problem After opening and closing the menu from an ActionsColumn or dropdown when using Safari, the page contents shifts.
How do you reproduce the problem? Using Safari, visit: https://console.redhat.com/openshift/cluster-list
Click the kebab menu on any table row several times
A very similar issue can also be seen using the Card View demo: https://www.patternfly.org/patterns/card-view
Click and delete a card, then open and close the card a few times. Contents shifts left, but then returns if you click again.
Expected behavior Not this!
Is this issue blocking you? No known workaround. Customers using Safari will encounter these issues in production.
Screenshots If applicable, add screenshots to help explain the issue.
https://github.com/user-attachments/assets/5765df72-c3eb-43aa-98df-81494936027c
https://github.com/user-attachments/assets/2592082d-0d4e-4b3f-aaad-b269f0f6575f
What is your environment?
- OS: macOS 14.6.1
- Browser Safari
- Version 17.6
What is your product and what release date are you targeting? OCM UI - Continuous Delivery
Hi, any update on this issue?
We are still experiencing this problem on Safari. I discovered it can be solved by passing popperProps={{ appendTo: () => document.body }} to the involved <ActionColums />.
This hints to some problems with how the popper is rendered in place.
Applying the same appendTo configuration to all the tables in our app feels like a workaround though. It's also causing z-index issues with other elements on the page.
Thanks! Roberto
OCM is also still seeing this issues. When the issue was originally opened they report the could reproduce it in our docs, but it looks like it has been fixed there.
They also shared the following: "Trying to set up a reproducer as simple as possible, I created a new route in our app and I created a component with just the PF table example from the docs. Here's what's happening on Safari:"
https://github.com/user-attachments/assets/8c29bb68-544f-463a-8076-42f6ca7c8b6d
Unable to recreate in the v5 version of the QuickStarts repo when I added the same table in. Trying to get access to OCM so I can recreate. I have no active clusters, so the cluster-list link does not work for me.
Able to recreate in OCM with a regular PF table inserted in a random page:
https://github.com/user-attachments/assets/09fadd28-bd66-4e8f-9135-3be01cc14215
I put this together to try and understand their page structure. They have a Drawer > PatternFly Page > Drawer > Page Section > Card > Table with Kebab: https://codesandbox.io/p/sandbox/upbeat-shape-czzm8y. It's not 100% the same, but you can kind of reproduce the scrolling there.
It seems to go away if you add overflow: hidden or initial to the second drawer.
Popper is appending the menu items next to the trigger in the DOM, which changes the size of the content. Using something like popperProps={{ appendTo: () => document.body }} as suggested above would avoid that, but I think it's not recommended for accessibility reasons and other reasons suggested above.
I don't know how often we have drawers within drawers in PatternFly. I don't know whether we want to apply this within PatternFly or not. The page structure definitely seems bizarre to me. It is also intermittent and fixes itself the next time you click something. They also have a mix of pf6 and pf5 styles in their DOM, which is also really odd.
Drawer seems to have been introduced in 2023 as part of an attempt to fix a scrolling bug?: https://gitlab.cee.redhat.com/service/uhc-portal/-/merge_requests/4241/diffs#5e91b656be6a5a1eda844ceb9740e24ded3b2a47. The whole thing is strange to me. It does not seem to have panel content. I'm wondering if they'd be better served dropping AppDrawer for something with appropriate CSS styles if they don't need the drawer as a drawer.
Closing for now, but feel free to reopen if you have comments. We suggest adding overflow: initial to AppDrawer and/or removing AppDrawer if it's not being used as a drawer.