Parent background highlights when clicking on child button in navigation dropdown item

[carkod]

Describe the bug

In the navigation dropdown pattern, when there is a button inside as a child, when a user clicks on it (having the p-navigation__dropdown-item as a wrapper, because if applied to the link or button it will change the styling), the parent is highlighted and obtains some kind of :active state.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://codepen.io/carkod/pen/qBwGbWo
2. Click on LXD
3. Click on "Introduction"

Expected behavior

Parent (li) shouldn't be highlighted when clicked on children.

Screenshots

https://github.com/canonical/vanilla-framework/assets/14939793/e9bddf40-fd99-445c-977c-e3ee78740810

[bartaz]

Having buttons inside navigation dropdowns is not something Vanilla supports right now, so it's not a bug in this sense, but a request to add a support for some new functionality.

But indeed, it is a bit unexpected that p-navigation__dropdown-item has hover and active states even if it's not an interactive element (link) but a div.

[bartaz]

Triage: high effort, low impact. This is needed mostly for meganav (and solved there). If needed navigation styles can be revisited when moving to new architecture. Closing this for now.

[syncronize-issues-to-jira[bot]]

Thank you for reporting us your feedback!

The internal ticket has been created: https://warthogs.atlassian.net/browse/WD-15280.

This message was autogenerated