DAWN Theme Filter option (Collapse on Dektop) Issue

Retired Boards Appdev Store Design
1

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
jnroche_0-1645717978099.png791×518 59.6 KB

Please help this is a great theme!

2

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;
3

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

jnroche_0-1645776546434.png
jnroche_0-1645776546434.png815×483 23.7 KB

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

4

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

5

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();
    });
  }
6

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