Advance select issue with open method and static method

[PruthviPraj00]

Hello @olegpix

1. When using open method,

   const select = new HSSelect(document.querySelector('#select'));

   it creates another instance of the select.

2. Using the static method causes an error in the console.

Could you see if I missed something, or is there an issue on your end?

[olegpix]

@PruthviPraj00 Hi, Please try the following:

1. You need to prevent initialization. You need to add the --prevent-on-load-init class to select you trying to initialize using new:

   <select id="select" class="--prevent-on-load-init" data-hs-select>
   ...
   </select>

2. For an open select you can use the open method of the initialized select:

   window.addEventListener('load', () => {
   const select = new HSSelect(document.querySelector('#select'));
   select.open();
   });

[PruthviPraj00]

Hello @olegpix,

Thank you for your response! The open method works perfectly. However, I'm curious about what other components I need to add the --prevent-on-load-init class to when trying to initialize using new.

I’m still encountering an error when trying to initialize the static method. Here’s the method I'm talking about:

const openBtn = document.querySelector('#open-btn');

openBtn.addEventListener('click', () => {
  HSSelect.open('#select');
});

You can refer to the second screenshot above for more details.

Thank you!

[PruthviPraj00]

Hello @olegpix,

Thank you for your assistance. The issue has been resolved, and both the public and static methods are now working without any errors. I will close this ticket now.