bug: In React/Next.js, I'm unable to reinitialize the Select component when state change

[MhdFeras]

What version of FlyonUI are you using?

1.3.0

Which browsers are you seeing the problem on?

All browsers

Reproduction URL

https://codesandbox.io/p/devbox/pp5kds?file=%2Fapp%2Fpage.tsx%3A63%2C25

Describe your issue

I'm using a Select component in my Next.js application, and I store the select options in a state. However, when the options change, I notice that the component still displays the old options.

I believe the component needs to be re-initialized when the options change, so I tried to use the following code to achieve that:

useEffect(() => {
    window.HSSelect?.autoInit();
  }, [allClassifications]);

but it didn't work!

Could I be missing something here?

[github-actions]

Hi @MhdFeras

Thank you for your support in helping us improve FlyonUI!

We’ve received your submission and will respond within few business days. Our team handles issues one at a time, and we’ll be reviewing yours as soon as possible.

In the meantime, any additional details or a reproducible example would be greatly appreciated and will help us resolve the issue more efficiently.

Thank you for your patience and understanding!

[MhdFeras]

Apologies for the inconvenience. I’ve figured out the correct way to reinitialize the Select component. It looks like I need to destroy the component and then initialize it again using the following code:

useEffect(() => {
if (window.HSSelect) {
      let destroySelect: any = window.HSSelect.getInstance("#tags-select");
      let selectEl: any = document.querySelector("#tags-select");
      destroySelect.destroy();
      new window.HSSelect(selectEl);
}
}, [allClassifications]);

https://flyonui.com/docs/advanced-forms/advanced-select/#destroy%2freinitialize

I'll mark this as closed