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 - Dropdown - Popper position is not updated on dynamic dropdown options #9703

Closed
ferhoyos opened this issue Oct 3, 2023 · 0 comments · Fixed by #9747
Closed

Bug - Dropdown - Popper position is not updated on dynamic dropdown options #9703

ferhoyos opened this issue Oct 3, 2023 · 0 comments · Fixed by #9747
Assignees
Milestone

Comments

@ferhoyos
Copy link

ferhoyos commented Oct 3, 2023

Describe the problem
I have a right kebab toggle where some of the dropdown options are dynamic and loaded after the dropdown option list is opened. In the deprecated Dropdown component, the popper position is adjusted after the option list update to fit the new width of the dropdown menu list. But this is not happening with the new PF5 dropdown component (horizontal scrollbar appears).

When the kebab toggle is clicked (item loading):
image

After the dropdown item is loaded (PF4 component):
image

After the dropdown item is loaded (new PF5 component):
image

How do you reproduce the problem?
I have created two sandboxes, one for each version of dropdown:
PF4 dropdown (working): https://codesandbox.io/s/unruffled-platform-8385hn?file=/index.tsx (sometimes the codesandbox fails because the deprecated library is not recognized, just refreshing the built-in browser do the trick)
PF5 dropdown (not working): https://codesandbox.io/s/keen-moon-j5grvh?file=/index.tsx

To reproduce the issue, just click on Kebab toggle and wait for the long text item to be loaded in the dropdown option list.

Expected behavior
After a dynamic option is loaded in the dropdown, the popper position should be adjusted to avoid horizontal scrollbar.

Is this issue blocking you?
No, but it is quite annoying to move the horizontal scrollbar to see the dropdown options or open twice the kebab toggle to have proper Popper position.

Screenshots
See the description and the code sandbox.

What is your environment?

  • OS: RHEL 8.7 CSB
  • Browse: Chrome
  • Version: 115.0.5790.170

What is your product and what release date are you targeting?
Kiali

Any other information?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Archived in project
Development

Successfully merging a pull request may close this issue.

4 participants