Custom Form Select Resets Another

Attributes
, , ,
1

Hello!

I have a section that utilizes CMS Filter, Custom Select, CMS Select, and CMS Nest.

See attached image:

image
image3806×1115 103 KB

The issue is with the section pictured above. Specifically with clearing/resetting the active filter. Is it possible to have 1 dropdown clear the other? Currently the functionality allows for both filters to be applied to the collection list below. I’d like it so that only 1 can be actively filtering at a time. When selecting one drop down it would clear the other.

Read-Only
Staging Link

Appreciate any help!

2

Hey @david6! We can achieve this with some custom code.

I have tested this script on my end and it seems to be working as expected. Please add it to the </body> section of the page and let me know how it goes!

<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsfilter',
    (filterInstances) => {
      console.log('cmsfilter Successfully loaded!');

      const [filterInstance] = filterInstances;
      const domainDropdown = document.querySelector('[fs-cmsfilter-field="domains"]');
      const functionDropdown = document.querySelector('[fs-cmsfilter-field="functions"]');

      const getOptions = (dropdown) =>
        Array.from(dropdown.parentNode.children).filter((option) => option !== dropdown);

      const domainOptions = getOptions(domainDropdown);
      const functionOptions = getOptions(functionDropdown);

      domainOptions.forEach((option) => {
        option.addEventListener('click', () => {
          console.log(`functions filter reset triggered!`);
          filterInstance.resetFilters(['functions']);
        });
      });

      functionOptions.forEach((option) => {
        option.addEventListener('click', () => {
          console.log(`domains filter reset triggered!`);
          filterInstance.resetFilters(['domains']);
        });
      });
    },
  ]);
</script>
1 Like
3

Hey @Support-Luis, this worked perfectly. Appreciate your help!

1 Like