• Dropdown menus not closing

    Hi, I am building e-commerce and installed Themify – WooCommerce Product Filter to use on the shop page.

    There is an issue with the menus: sometimes when the user opens a menu, it doesn’t close automatically when the mouse leaves. It doesn’t happen all the time but happens frequently.
    It’s a strange behavior… sometimes more than one dropdown keeps showing the menu items.

    Any clue how o solve this? I have some CSS skills but it seems to be a bug and maybe it will need some javascript to make the dropdowns work correctly.

    Thanks!

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author themifyme

    (@themifyme)

    Hi,

    Sorry, but I can’t see Product Filter on the above shared URL, have you removed the filter? or could you send us a link to the page where we can see the filter?

    Thread Starter rhippert

    (@rhippert)

    Sorry, we removed the plugin to make some tests. But now we just put it back online.

    I don’t know why but the problem now seems to have been minimized. Do you think it can be due to some WordPress cache or something the like?

    For your information, we had already customized some CSS, as shown below, because the way the menus open, taking the full width of the module, make the filter use more confusing to the user (in our opinion). But this is not the main discussion here. I am attaching the CSS just to be sure it’s not causing the problem:

    .wpf_layout_horizontal .wpf_item {
        width: 19%;
        vertical-align: top;
        display: inline-block;
        border: 1px solid rgba(0,0,0,.1);
        padding: 0;
        margin-bottom: 5px;
        margin-right: 0.5%;
        background: #fff;
        border-radius: 8px;
    }
    
    .wpf_layout_horizontal .wpf_item_name {
        font-size: 0.9em !important;
        line-height: 1.2em;
        font-weight: normal;
        border: none;
        margin: 0;
        padding: 0.6em 0.8em;
        vertical-align: middle;
        display: inline-block;
        overflow: hidden;
    }
    
    .wpf_layout_horizontal .wpf_items_group.wpf_left_tab {
        border-top-left-radius: 0;
        width: 100% !important;
    }
    
    .wpf_layout_horizontal .wpf_items_group.wpf_right_tab {
        left: auto;
        right: -1px;
        width: 100% !important;
    }
    
    .wpf_item label {
        font-size: 0.7em;
    }
    Thread Starter rhippert

    (@rhippert)

    Additional information… I noticed that the dropdown doesn’t close when the user selects an option and the mouse leaves while the filter is still working in the background.

    Plugin Author themifyme

    (@themifyme)

    That is normal, because the filter is still loading, based on selection done within the dropdown, so the dropdown remains active.

    Thread Starter rhippert

    (@rhippert)

    Please take a look at the video in this URL: https://www.loom.com/share/70aa59fd6a9042bcaabea1e53e993861

    It shows that the dropdowns don’t close when I select an option and, while the filter is loading, my mouse leaves the dropdown. The result is: I can see several opened dropdowns on the screen. It’s a bit strange for the user.

    Plugin Author themifyme

    (@themifyme)

    Yes, I understood, that is normal, because the dropdown is active while filtering and moving the mouse away in this moment will keep the dropdown active, while loading it can’t track your mouse position, so if you wait until applying the filter, then move the mouse away will disable the dropdown, because after loading it can track your mouse position.

    PS. I will ask our developer if there’s anything we can do about this.

    Thread Starter rhippert

    (@rhippert)

    Great! I will wait for your feedback, ok?
    Thanks!

    Plugin Author themifyme

    (@themifyme)

    Ok, I will let you know as soon as I hear back from our developer.

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Dropdown menus not closing’ is closed to new replies.