Advanced select not working with dynamic values and no option to select or disable.

[ahl-asg]

Hi, I am trying to use the Advanced select, with dynamic values. But I encounter several issues.

1. Placeholder no longer works
2. I am unable to select any of the options (mouseclick) (visually at least)

Also, it does not appear there is any way to select an option when adding them, and there is no way to disable them either.

I can see when getting the values of the select, that it works, but the rendering showing the options and if they are selected or not, doesn't work.

This is my code to render.

if(this.testPrelineSelect){
    this.testPrelineSelect.innerHTML = '';
    // Assign available products to the test preline select.
    const select = new HSSelect(this.testPrelineSelect);

    if(products){
        products.forEach(product => {
            select.addOption(
                {
                    val: product.id,
                    title: product.name,
                }
            )
        });

        window.HSStaticMethods.autoInit(['select']);
    }
}

And this is the html:

<select id="testPrelineSelect" class="--prevent-on-load-init" multiple data-hs-select='{
  "hasSearch": true,
  "searchPlaceholder": "Søg...",
  "searchClasses": "block w-full text-sm border-gray-200 rounded-lg focus:border-blue-500 focus:ring-blue-500 before:absolute before:inset-0 before:z-[1] dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 py-2 px-3",
  "searchWrapperClasses": "bg-white p-2 -mx-1 sticky top-0 dark:bg-slate-900",
  "placeholder": "Vælg produkter...",
  "toggleTag": "<button type=\"button\"><span class=\"me-2\" data-icon></span><span class=\"text-gray-800 dark:text-gray-200\" data-title></span></button>",
  "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-3 px-4 pe-9 flex text-nowrap w-full cursor-pointer bg-white border border-gray-200 rounded-lg text-start text-sm focus:border-blue-500 focus:ring-blue-500 before:absolute before:inset-0 before:z-[1] dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400",
  "dropdownClasses": "mt-2 max-h-72 pb-1 px-1 space-y-0.5 z-20 w-full bg-white border border-gray-200 rounded-lg overflow-hidden overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-track]:bg-gray-700 dark:[&::-webkit-scrollbar-thumb]:bg-gray-500 dark:bg-slate-900 dark:border-gray-700",
  "optionClasses": "py-2 px-4 w-full text-sm text-gray-800 cursor-pointer hover:bg-gray-100 rounded-lg focus:outline-none focus:bg-gray-100 dark:bg-slate-900 dark:hover:bg-slate-800 dark:text-gray-200 dark:focus:bg-slate-800",
  "optionTemplate": "<div><div class=\"flex items-center\"><div class=\"me-2\" data-icon></div><div class=\"text-gray-800 dark:text-gray-200\" data-title></div></div></div>",
  "extraMarkup": "<div class=\"absolute top-1/2 end-3 -translate-y-1/2\"><svg class=\"flex-shrink-0 size-3.5 text-gray-500 dark:text-gray-500\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m7 15 5 5 5-5\"/><path d=\"m7 9 5-5 5 5\"/></svg></div>"
}' class="hidden">
                        <option value="">Vælg</option>
                    </select>

I have followed your updated documentation, but have so far been unable to make it work.

[dotmra]

Hi!

I have just looked a bit closer on @ahl-asg issue. The issue seems to only happen on multiple select.

As soon as I removed the multiple tag on the select, the HTML seems to render okay. And when I removed this.testPrelineSelect.innerHTML = '';, the placeholder seems to render also.

[ahl-asg]

To further update on the select, there also appears to be an issue where the selected value is not shown in the dropdown, ie the icon checkmark is never present.

[olegpix]

toggleTag

Hi, Please, remove toggleTag, we don't provide custom toggleTag for the multiple selects at the moment