Expanding popover accordions prevent other popovers from appearing

Created on 28 March 2024, 9 months ago
Updated 17 April 2024, 8 months ago

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.

🐛 Bug report
Status

Fixed

Version

1.0

Component

Code

Created by

🇺🇸United States bronzehedwick New York

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @bronzehedwick
  • 🇮🇳India ahsannazir

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

  • 🇺🇸United States bronzehedwick New York

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

  • Assigned to bronzehedwick
  • 🇺🇸United States bronzehedwick New York
  • Pipeline finished with Success
    9 months ago
    Total: 199s
    #134809
  • 🇺🇸United States bronzehedwick New York

    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!

  • Issue was unassigned.
  • Status changed to Needs review 9 months ago
  • 🇺🇸United States bronzehedwick New York
  • 🇮🇳India ahsannazir

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

  • 🇪🇸Spain ckrina Barcelona

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

  • 🇮🇳India Kanchan Bhogade

    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

  • Status changed to Postponed 9 months ago
  • 🇪🇸Spain ckrina Barcelona

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

  • Status changed to Fixed 9 months ago
  • 🇪🇸Spain ckrina Barcelona

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

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

  • Pipeline finished with Success
    6 months ago
    #197310
  • Pipeline finished with Success
    6 months ago
    Total: 862s
    #197915
  • Pipeline finished with Success
    6 months ago
    Total: 188s
    #197939
  • Pipeline finished with Success
    6 months ago
    Total: 208s
    #203851
  • Pipeline finished with Failed
    4 months ago
    Total: 356s
    #275329
  • Pipeline finished with Success
    4 months ago
    #275341
  • Pipeline finished with Failed
    3 months ago
    Total: 315s
    #289795
  • Pipeline finished with Success
    3 months ago
    Total: 434s
    #289803
  • Pipeline finished with Success
    about 2 months ago
    Total: 232s
    #320413
  • Pipeline finished with Canceled
    about 2 months ago
    Total: 130s
    #320421
  • Pipeline finished with Success
    about 2 months ago
    Total: 307s
    #320431
  • Pipeline finished with Failed
    about 2 months ago
    #331907
  • Pipeline finished with Canceled
    about 2 months ago
    #331909
  • Pipeline finished with Failed
    about 2 months ago
    #331914
  • Pipeline finished with Success
    about 2 months ago
    #331972
  • Pipeline finished with Success
    about 1 month ago
    Total: 145s
    #336149
  • Pipeline finished with Failed
    about 1 month ago
    Total: 1273s
    #346028
  • Pipeline finished with Failed
    about 1 month ago
    Total: 1336s
    #346933
  • Pipeline finished with Success
    30 days ago
    Total: 4138s
    #347370
  • Pipeline finished with Success
    2 days ago
    Total: 1612s
    #375164
  • Pipeline finished with Success
    2 days ago
    Total: 233s
    #375197
  • Pipeline finished with Success
    2 days ago
    Total: 233s
    #375216
Production build 0.71.5 2024