setValue for select doesn't work as expected

[sebGH06]

Summary

when trying to set the value of an existing select, it throw a javascript console error

Steps to Reproduce

document.addEventListener('DOMContentLoaded', function() {

    HSStaticMethods.autoInit(['select']); // Mandatory for HSSelect instance to work 

    const selectEl = document.querySelector('#mySelect');
    const selectInstance = HSSelect.getInstance(selectEl);
    console.log(selectInstance); // I can see the instance OK

    const setValueBtn = document.querySelector('#remember');

    setValueBtn.addEventListener('click', () => {

        selectInstance.setValue("always"); // Trigger the error
    });
});

Demo Link

https://preline.co/plugins/html/advanced-select.html

Expected Behavior

setValue is expected to set the value of the select

Actual Behavior

setValue trigger an error

In the console.log, I see in the instance I displayed that the value property has changed to the new value, but nothing happen on the page.

For your information, trying the close() method or open() method work perfectly, only setValue is faulty !

Screenshots

[hieuhuynh93]

I also got the same error when using setValue. Can you take a look this issue @jahaganiev ?

[seho-nl]

I had the same problem today and digged a little deeper in the code. I found the following.

When using the API to setValue() of a HSSelect instance, it runs the setToggleTitle() method. See: https://github.com/htmlstreamofficial/preline/blob/main/src/plugins/select/index.ts#L323 Without explaining in detail what is going on there (you maybe want to figure that out yourself if you feel like it) the code is looking for an element with a data-title attribute in the toggle tag. This is their way to set the actual label of the new value in the rendered select.

Looking at my own code, I had the following toggleTag in my HSSelect template:

<select data-hs-select='{
    ...
    "toggleTag": "<button type=\"button\"></button>",
    ...
}>

As you can see, there is no element with a data-title attribute in the toggle tag and hence no container/reference to render the selected value's label in. So let's add it:

<select data-hs-select='{
    ...
    "toggleTag": "<button type=\"button\"><span data-title></span></button>",
    ...
}>

That's it. Well, at least for me.

It is good to note that the <span data-title></span> and also the <span data-icon></span> are mentioned in some of the examples in the doc. See: https://preline.co/docs/advanced-select.html#set-single-value-using-setter

Hope that helps out!