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...
- Expand the navigation
- Hover over a menu item
- Click an accordion inside the resulting popover
- 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.
- Hover over a menu item below the currently active one, then hover out. Notice the original popover still appears.
See attached video.
| Comment | File | Size | Author |
|---|---|---|---|
| #10 | Popover-afterpatch.mp4 | 599.58 KB | kanchan bhogade |
| #10 | Popover-bug.mp4 | 1013.75 KB | kanchan bhogade |
| #8 | Home _ d-10.gif | 421.1 KB | ahsannazir |
| popover-active-bug.mov | 11.31 MB | bronzehedwick |
Issue fork navigation-3436873
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
Comment #2
ahsannazir commentedIMO 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
Comment #3
bronzehedwickOn mobile the behavior only toggles on click, so it's possible the click events are "leaking" into desktop.
Comment #4
bronzehedwickComment #6
bronzehedwickI 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.
: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!
Comment #7
bronzehedwickComment #8
ahsannazir commentedThanks @bronzehedwick. I think now the toolbar popover is behaving as it should and the provided solution looks good to me.
Comment #10
kanchan bhogade commentedHi,
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
Comment #11
ckrinaBased 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.
Comment #12
ckrinaThis has been fixed in #3437401: Drawer closes when moving from the opening item to "popover". Closing as fixed per the work done here :)