Dropdown doesnt work with CMS Load Pagination

Attributes
1

Hello together,

I have implemented CMS Load with pagination on this page:

The CMS Items are all the default Webflow Dropdowns. But after going to the next page, the dropdowns dont work anymore..

I have placed the fs-list-resetix=true attribute and also tried the prior fs-cmsload-resetix=true attribute I found in another thread here, but both didnt work..

Here is the share link:

I appreciate your help!

1 Like
2

Hey @duy.kevin! Could you be using custom code to open the dropdowns? I do not see any interaction set to any element of the collection list, hence why fs-list-resetix = true is not working.

I do see a snippet that seems to handle the closing, or at least the toggle of the .w--open class

<script>
  document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.clinic-team_pop-up-close').forEach((btn) => {
      btn.addEventListener('click', function () {
        const dropdown = btn.closest('.w-dropdown');
        if (dropdown) {
          const toggle = dropdown.querySelector('.w-dropdown-toggle');
          const list = dropdown.querySelector('.w-dropdown-list');
          toggle?.classList.remove('w--open');
          list?.classList.remove('w--open');
        }
      });
    });
  });
</script>

Which we need to modify to the following in order for it to affect newly rendered items

<script>
  window.FinsweetAttributes = window.FinsweetAttributes || [];
  window.FinsweetAttributes.push([
    'list',
    (listInstances) => {
      console.log('List Successfully loaded!');

      const [listInstance] = listInstances;

      listInstance.addHook('render', () => {
        document.querySelectorAll('.clinic-team_pop-up-close').forEach((btn) => {
          btn.addEventListener('click', function () {
            const dropdown = btn.closest('.w-dropdown');
            if (dropdown) {
              const toggle = dropdown.querySelector('.w-dropdown-toggle');
              const list = dropdown.querySelector('.w-dropdown-list');
              toggle?.classList.remove('w--open');
              list?.classList.remove('w--open');
            }
          });
        });
      });
    },
  ]);
</script>

Another option to the root cause would be the use of Webflow’s native dropdown list, as I can make the dropdown work for all items if I reinitate the interaction engine with this snippet

<script>
  window.FinsweetAttributes = window.FinsweetAttributes || [];
  window.FinsweetAttributes.push([
    'list',
    (listInstances) => {
      console.log('List Successfully loaded!');

      const [listInstance] = listInstances;

      listInstance.addHook('render', () => {
        window.Webflow && window.Webflow.destroy();
        window.Webflow && window.Webflow.ready();
        window.Webflow && window.Webflow.require('ix2').init();
        document.dispatchEvent(new Event('readystatechange'));
        document.querySelectorAll('.clinic-team_pop-up-close').forEach((btn) => {
          btn.addEventListener('click', function () {
            const dropdown = btn.closest('.w-dropdown');
            if (dropdown) {
              const toggle = dropdown.querySelector('.w-dropdown-toggle');
              const list = dropdown.querySelector('.w-dropdown-list');
              toggle?.classList.remove('w--open');
              list?.classList.remove('w--open');
            }
          });
        });
      });
    },
  ]);
</script>

However, this will break any interaction with an initial state :thinking:

We have an Accordion Attribute in case you want to try this one out, either the JS version or the IX (with the resetix attribute) version should work.

3

Hey Luis,

Thank you for your reply. Yes im not using any webflow interaction/animation on it its just the simple webflow dropdown element. The custom code only handles a custom close button. But after placing the two codes you provided it works now! Thanks a lot.

Is this something I always need to take care of when using dropdowns with cms load? I couldnt find any info on it not working.

Best,
Kevin

4

Yes, this is always a consideration if you are using native Webflow elements such as the dropdown. As the code that runs their interaction only runs on page load, we need to rerun it for the newly rendered items.