Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

DAWN Theme Filter option (Collapse on Dektop) Issue

Solved

DAWN Theme Filter option (Collapse on Dektop) Issue

jnroche
New Member
7 0 0

First of all thank you to the theme developers for making this theme free!

 

I am using DAWN theme for my shopify website but with the filtering enabled to "collapse on desktop" this does not seem to work, more specifically the check boxes are not getting clicked and when you click any of the checkboxes it closes and goes back to the page where I am currently without the filter working. 

 

It does work when you use the tab key to move to the filter criteria and space bar to select/deselect a criteria but when using the mouse click it doesn't respond properly. 

 

In the mobile version it works perfectly! 

 

jnroche_0-1645717978099.png

 

Please help this is a great theme!

Accepted Solution (1)

jmaxblueacorn
Tourist
3 1 1

This is an accepted solution.

Seeing the same issue. Looks like a newer bug. I know there has been a few issues recently with metafields not updating. It seems to be specific to mobile right? It looks like a z-indexing issue here: input.mobile-facets__checkbox

 

    border: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    appearance: none;
    -webkit-appearance: none;

View solution in original post

Replies 5 (5)

jmaxblueacorn
Tourist
3 1 1

This is an accepted solution.

Seeing the same issue. Looks like a newer bug. I know there has been a few issues recently with metafields not updating. It seems to be specific to mobile right? It looks like a z-indexing issue here: input.mobile-facets__checkbox

 

    border: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    appearance: none;
    -webkit-appearance: none;
jnroche
New Member
7 0 0

Thank you for this. It's very helpful. I found the culprit on this file with line # in the screenshot:

 

jnroche_0-1645776546434.png


set to z-index;999 and now working on both desktop and mobile!

 

jmaxblueacorn
Tourist
3 1 1

Still seeing some inconsistent behavior in safari (both mobile and desktop)

jmaxblueacorn
Tourist
3 1 1

I think I finally got to the source of the issue. Safari is still having trouble. In the global.js in the custom menu-drawer class I added an additional check for the mobile facet class.

 

onFocusOut(event) {
    setTimeout(() => {
      if (this.mainDetailsToggle.hasAttribute('open') && !this.mainDetailsToggle.contains(document.activeElement) && !this.classList.contains('mobile-facets__wrapper')) this.closeMenuDrawer();
    });
  }

 

 

cmall
Visitor
1 0 0

Thanks for this - the only thing that fixed an issue I spent hours on.