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.

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

Bug - Table ActionsColumn, Dropdown - Page contents shifts on Safari after multiple interactions with kebab menus #10856

Open
KevinFCormier opened this issue Aug 13, 2024 · 3 comments
Labels
Milestone

Comments

@KevinFCormier
Copy link
Contributor

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.

Cluster.List.Safari.mov
Card.View.Safari.mov

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

@github-project-automation github-project-automation bot moved this to Needs triage in PatternFly Issues Aug 13, 2024
@tlabaj tlabaj added this to the Prioritized Backlog milestone Sep 19, 2024
@tlabaj tlabaj moved this from Needs triage to Backlog in PatternFly Issues Sep 19, 2024
@kelvah
Copy link

kelvah commented Oct 2, 2024

Hi! Any update on this bug? Thanks!

@kmcfaul kmcfaul removed the bug label Oct 25, 2024
@kelvah
Copy link

kelvah commented Dec 17, 2024

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

@tlabaj
Copy link
Contributor

tlabaj commented Jan 14, 2025

OCM is also still seeing this issues.
When the issue was originally opened they report the could reproduce it in our docs, but are it look 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:"

Screenshare.-.2025-01-14.2_27_47.PM.mp4

@thatblindgeye thatblindgeye moved this from Backlog to Ready to assign in PatternFly Issues Jan 14, 2025
@tlabaj tlabaj added the PF5 label Jan 14, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
Status: Ready to assign
Development

No branches or pull requests

5 participants