A space to discuss online store customization, theme development, and Liquid templating.
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!
Please help this is a great theme!
Solved! Go to the solution
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;
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;
Thank you for this. It's very helpful. I found the culprit on this file with line # in the screenshot:
set to z-index;999 and now working on both desktop and mobile!
Still seeing some inconsistent behavior in safari (both mobile and desktop)
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();
});
}
Thanks for this - the only thing that fixed an issue I spent hours on.