Input Active Issue

Attributes
1

I’m tearing my hair out with this one! Hoping a fresh pair of eyes will find the issue.

I have a filter setup on mobile that works by using mirror click/input to instruct the main filter, which on mobile is hidden from view.

The mirroring is all working fine and filters work great.

But this method doesn’t automatically change the colour back on the checkbox once a filter is cleared, however I fixed this too using some javascript and all is good apart from the “Niche” part of the filter.

With the Niche filter, no matter what I try, I can’t uncheck the checkbox after pressing the “clear” button. In fact the checkbox starts checked which is the first issue.

To be clear, the mirroring is working and the filter is being cleared, it’s just the visual check remains.

The JS is setup in an identical way to the other checkboxes. The is-active-inputactive class is there as is the script to enable it.

My guess is I haven’t implemented the is-active-inputactive class correctly, but I’ve tried all sorts of combinations and no luck.

Heres the read only link:
https://preview.webflow.com/preview/great-ads?utm_medium=preview_link&utm_source=designer&utm_content=great-ads&preview=439cc7004d36950d559620c6ca522aa2&workflow=preview

The JS code can be found at the beginning of the body section.

Please note, you’ll need to use a mobile view to see the issue and only the “Fashion/Clothing” and “Beauty” ones are enabled in the Niche section.

@Support-Luis any ideas?

Cheers

2

Hey @v11! You can build a filter set for mobile and desktop without needing to mirror clicks between them. You can style and hide the filter according to the breakpoint.

This should eliminate the need for JS and Mirror Click while keeping the styling of the buttons as expected.

Give it a try and let me know if I can help :wink:

3

Yeah they are in different positions, on desktop it’s on a sidebar which is hidden from view on mobile hence mirroring

4

As long as they are in one form you can have different elements for the filter but showing and hiding. There is no issue if several button groups share the same element as only one is visible.

Here is a very rough example:

Live site
Read-only

5

I understand that, the filters are positioned in a sidebar for which the entire div is not visible on mobile.

I get that if the filter was moved outside of the sidebar and into the main content area we could use the same filter om mobile and desktop.

But then the UX on desktop wouldn’t be quite the same and the site is intentionally optimised this way to keep the filter in view while you scroll down (expecting more desktop users than mobile).

Anyway, the mirroring is working for all the filter options. the only issue is removing the class / checked state of the niche options (It’s working for the other filter options, which makes it all the more frustrating)

6

Hey @v11! I’ve been trying to debug on my end for some time now but I can not figure out what is happening. The selectors are correctly assigned, I even moved the ids to the actual checkboxes with the is-active-inputactive class and saw it being correctly removed but the style was still there.

7

@Support-Luis thanks for trying man, that’s exactly what happened to me. I thought I missed something obvious, but clearly not. Some other issue is at play.

1 Like