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 - Menu/Dropdown - ouiaId is applied to element that does not exist by default, making automation unnecessarily difficult #11086

Open
mirekdlugosz opened this issue Sep 27, 2024 · 0 comments

Comments

@mirekdlugosz
Copy link

Describe the problem
Dropdown component takes ouiaId attribute, but attribute is present only in dropdown menu element - one that does not exist in HTML by default, until menu toggler is clicked.

This makes test automation unnecessarily difficult, as <Dropdown> ouiaId can't be used to expand the dropdown. Instead, automation must target element provided in toggle attribute. That also puts more pressure on app developer, because maintaining consistent ouiaId attribute naming between toggle and menu must be done manually.

Compare that to PatternFly v4, where both toggle button and dropdown menu shared a single parent, and ouiaId was present in that parent. Automation could easily find that parent and then refer to button or menu using data-ouia-component-type alone.

How do you reproduce the problem?

  1. Open https://www.patternfly.org/components/menus/dropdown#basic-dropdowns
  2. In TypeScript code, you can see that <Dropdown> has ouiaId="BasicDropdown"` attribute
  3. Open dev tools and try to find element with data-ouia-component-id="BasicDropdown" attribute in page source. You can't, because there is none. It will be created when you expand the dropdown.

Expected behavior
Both toggle and menu should share a single parent and ouiaId should be applied to that parent. Makes it easy for both app developer and anyone writing automation.

This is even worse in v6 alpha, where button and menu are not even close to each other in DOM tree.

Is this issue blocking you?
No, we put ouiaId in <MenuToggle> inside toggle attribute and pray we won't have to rewrite our automation every time we update Patternfly.

What is your product and what release date are you targeting?
Discovery. Upstream is called Quipucords, UI repo is https://github.com/quipucords/quipucords-ui

@tlabaj tlabaj added this to the Prioritized Backlog milestone Oct 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
Status: Backlog
Development

No branches or pull requests

2 participants