Problem/Motivation

When you click to expand an accordion inside a popover, that popover will stay visible until another element is clicked. If the user hovers over another menu item, that item's popover will appear behind the currently expanded popover, unless it's after in the source order. In that case, the original popover will reappear when the new one is hovered out of, until a click is made.

Steps to reproduce

On large screens...

  1. Expand the navigation
  2. Hover over a menu item
  3. Click an accordion inside the resulting popover
  4. Hover over a menu item above the currently active one. Notice that the resulting popover is hidden behind the clicked one, and it's still active.
  5. Hover over a menu item below the currently active one, then hover out. Notice the original popover still appears.

See attached video.

Issue fork navigation-3436873

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

bronzehedwick created an issue. See original summary.

ahsannazir’s picture

IMO it should toggle either on hover or on click. If the popover is opened on click then why we need hover to toggle show/hide the same popover. Can someone look into this and confirm that the current behavior implemented is what we want

bronzehedwick’s picture

On mobile the behavior only toggles on click, so it's possible the click events are "leaking" into desktop.

bronzehedwick’s picture

Assigned: Unassigned » bronzehedwick

bronzehedwick’s picture

I think I've figured this one out, and have a solution in an MR. I agree it seems like an unintended side effect that both hover and click toggle the menu on large screens. This is caused by two issues.

  1. Hovers are handled only on small screens, while clicks are handled on all screen sizes.
  2. Keeping the menu visible is done on :focus, not :focus-visible, so is triggered by a click.

I'd love to hear if anyone has a different strategy or thoughts around this.

Thanks!

bronzehedwick’s picture

Assigned: bronzehedwick » Unassigned
Status: Active » Needs review
ahsannazir’s picture

StatusFileSize
new421.1 KB

Thanks @bronzehedwick. I think now the toolbar popover is behaving as it should and the provided solution looks good to me.

ckrina changed the visibility of the branch 3436873-expanding-popover-accordions to hidden.

kanchan bhogade’s picture

StatusFileSize
new1013.75 KB
new599.58 KB

Hi,
I've tested MR !220 on Drupal 11.x
the patch applied successfully...

After the patch, Popover is working as expected and looks good to me.

Adding files for the references

RTBC+1

Keeping "Needs review" for code verification

ckrina’s picture

Status: Needs review » Postponed
Related issues: +#3437401: Drawer closes when moving from the opening item to "popover"

Based on Slack conversation postponing this until #3437401: Drawer closes when moving from the opening item to "popover" gets in. Let's see if this is still needed when that gets in.

ckrina’s picture

Status: Postponed » Fixed

This has been fixed in #3437401: Drawer closes when moving from the opening item to "popover". Closing as fixed per the work done here :)

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.