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!

[olegpix]

@seho-nl Yes, you are absolutely right, the element with thedata-title attribute is mandatory, we will definitely update the documentation in the next update.

[Root-acess]

It seems like the issue with setting the value of your select element (HSSelect instance) using setValue() is due to a missing data-title attribute within the toggleTag of your HSSelect configuration. Here’s a summary and solution based on your observations.

Issue Summary

• The setValue() method triggers an error because it calls setToggleTitle() internally, which expects a data-title attribute in the toggleTag.
• If there is no element with the data-title attribute, HSSelect cannot display the selected value’s label, which results in the error.
• The open() and close() methods work because they don’t rely on setToggleTitle().

Solution

To fix this, modify your HSSelect configuration to include a span with the data-title attribute inside the toggleTag. This will give HSSelect a reference to update the selected value’s label.

Example Code

Update your select element with a data-title inside the toggleTag as follows:

<select data-hs-select='{
    ...
    "toggleTag": "<button type=\"button\"><span data-title></span></button>",
    ...
}' id="mySelect">
    <option value="sometimes">Sometimes</option>
    <option value="always">Always</option>
</select>

Explanation

The span with data-title inside the toggleTag acts as a placeholder for the label of the selected value. Now, when setValue() is called, HSSelect will correctly update this data-title span to display the new selection.

Additional

• Ensure the select instance is initialized and working before calling setValue().
• Refer to the Preline documentation for examples and further customization options.

[radykal]

I found another bug, you can not use setValue when tags mode is enabled. The setValue function triggers that code:

this.toggleTextWrapper.innerHTML = this.value.length This is causing any error: TypeError: Cannot set properties of undefined (setting 'innerHTML')

But the toggleTextWrapper is only created in buildToggle function and buildToggle is only triggered when not using tags: this.buildWrapper(); if (this.mode === 'tags') this.buildTags(); else this.buildToggle();

[lenart]

Not sure if I should open a new issue but it seems that calling removeOption(value) removes the value from mySelect.value but not from mySelect.selectedValues. I'd also expect the removeOption to remove item from the input field.

And one last thing - adding the posibility to use Backspace to remove (last) item would be nice UX thing.

[jahaganiev]

Hey everyone, the issue has been addressed in the latest v2.6.0 release. Thanks!

[FordSmh]

I found another bug, you can not use setValue when tags mode is enabled. The setValue function triggers that code:

this.toggleTextWrapper.innerHTML = this.value.length This is causing any error: TypeError: Cannot set properties of undefined (setting 'innerHTML')

But the toggleTextWrapper is only created in buildToggle function and buildToggle is only triggered when not using tags: this.buildWrapper(); if (this.mode === 'tags') this.buildTags(); else this.buildToggle();

I believe this case has not been fixed, can someone confirm that it's not on my end? Tried every provided solution from this issue

[ibdf]

Just wanted to add that the plugin documentation also needs to be updated https://preline.co/plugins/html/advanced-select.html. The only example does not include the data-title.