search

canonical / vanilla-framework

From community websites to web applications, this CSS framework will help you achieve a consistent look and feel.
https://vanillaframework.io
GNU Lesser General Public License v3.0
822 stars 166 forks source link

Closing nested dropdowns in sliding navigation dismisses overlay #5288

Open jmuzina opened 1 month ago

jmuzina commented 1 month ago

Describe the bug

When closing a nested dropdown of a sliding navigation bar, the dark overlay tint that is applied to the body is dismissed, even though a dropdown is still open.

To Reproduce

Steps to reproduce the behavior:

  1. Go to sliding nav example
  2. Expand the LXCFS dropdown
  3. See that the dark overlay is applied to the page.
  4. Expand the Nested Layer dropdown within the LXCFS dropdown.
  5. See that the dark overlay is still present.
  6. Collapse the Nested Layer dropdown.
  7. See that the dark overlay has been dismissed.

Expected behavior

The dark overlay is present whenever a dropdown is opened.

Screenshots

https://github.com/user-attachments/assets/ac5cbb54-6ffc-497c-82cc-7797717961ae

Additional context

I suspect this problem may come from dismissing is-active on too many elements in the collapse handler.

This was noticed in #5110 in this comment.

syncronize-issues-to-jira[bot] commented 1 month ago

Thank you for reporting us your feedback!

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

This message was autogenerated

advl commented 3 weeks ago

After an initial read, I have come to understand the following :

  1. The shadow is defined in the class has-menu-open https://github.com/canonical/vanilla-framework/blob/9e1aff381e97ce29fe0ad7f245a9fbfeceb1f3e0/scss/_patterns_navigation.scss#L840
  2. There is currently no event handler attached to secondary menu items in the navigation script

The solution would be to listed to click events on the collapse handler to properly toggle the has-menu-open class.

Additionally, this raises the question of whether we could have navigation items that do not intend to close the menu (e.g. a toggle as a menu item). In that case the solution would be the same, including a more specific query selector.