Multiple select does not get properly initialized when having certain options pre-selected

[MICSCHWA]

I've been testing the multiple select of ECL within an update form and realized that when having options selected on initialization, the counter (the small tag displayed at the beginning of the control) won't show up... I also have the issue that the counter doesn't seem to work correctly in certain scenarios (e.g. I wanted to use it for a kind of keyword selection with 100+ options).

You can re-produce this inside the playground as well (tested in v4.10.0). Just go to the sample code for "Components > Form > Select multiple" and update the options of the select to something like:

  ...
  <optgroup label="European countries">
    <option value="1">Belgium</option>
    <option value="2">France</option>
    <option value="3" disabled="">Luxembourg</option>
    <option value="4" selected="">Germany</option>
    <option value="5" selected="">Bulgaria</option>
    <option value="6">Italy</option>
    <option value="7">Romania</option>
    <option value="8">Greece</option>
    <option value="9">Hungary</option>
    <option value="10">Portugal</option>
  </optgroup>
  <optgroup label="Non European countries">
    <option value="11" selected="">China</option>
  </optgroup>
  <option value="12">standalone option</option>
 ...

Small addition:
When using this syntax:

  <option value="4" selected="selected">Germany</option>

... you can de-select this option but you cannot select it anymore.

[planctus]

Hello @MICSCHWA, it is not clear to me the way you are using the multiple select, the way to reproduce the issue that you mentioned in this issue is simply not valid, because you cannot replace the options of the select element in the DOM and expect the multiple select to work properly, what it does is to generate the elements "replacing" the standard select element based on the available options, so if you want to see the multiple select handling a different set of options or status for them not related to the interaction by the user you need to destroy the current instance and create a new one, there is no method provided by the component's api that would let you modify the dom and udpate the multiple select based on that.

const select = document.querySelector('#mySelect');
const eclSelect = ECL.components.get(select);
eclSelect.destroy();
eclSelect.init();

Having said this there is a problem indeed in the counter when you have pre-selected options, the counter gets updated but it's not visible, basically.
Now, we will fix this in ECL v5 for sure, but i'm not sure about v4, it might take more time or potentially never happen, since it shouldn't be too hard to upgrade you could consider starting the "migration" to v5: https://github.com/ec-europa/europa-component-library/blob/v5/docs/Migrating-v5.md

Thanks for reporting this, if you feel i haven't fully understood your problem i'm here and you can try to furhter explain that to me.

[MICSCHWA]

Thank you @planctus,

The pre-selected options are - in my case - not selected by manipulating the DOM but they come directly as selected options within the plain select element (so before the ECL is initialized).

When your initial HTML is rendered like ...
<option value"1" selected="">Option1</select>
or
<option value"1" selected="selected">Option1</select>
... ECL select multiple won't let you de-select and re-select this particular option anymore.

However, it works when you render your HTML like (so basically without an attribute value for selected):
<option value"1" selected>Option1</select>

All of the samples are valid HTML IMO

PS: thanks for the info on the counter issue. I also saw that the initial counter value is something like "111111" in case you have 6 options selected. It contains a "1" per option instead of just the value "6"

[planctus]

Hello again @MICSCHWA, i can confirm a second bug where the pre-selected option can be de-selected but not selected again, regarding the markup instead, doesn't really change much if you use selected or selected="selected" but the first syntax is better and also simpler and shorter, boolean attributes should be only defined using their names.

As said both these bugs will be fixed in a next release on the 5.x version, for the 4.x we will see if we collect other issues that will justify a new release.

[jmlmdev]

Hello, I am experiencing the same issues as @MICSCHWA. Unfortunately, I discovered this issue after spending a couple of days troubleshooting both bugs. However, thanks to that, I was able to implement a couple of workarounds that might be useful for other developers.

Regarding the selection/deselection issue, the root cause of the bug is the #handleClickOption function, specifically on line 944. There, the value of option.getAttribute('selected') is checked to set the option.selected value, which causes any option in the select that is pre-selected to never be selectable again, as option.getAttribute('selected') will always return true. To fix this, you simply need to remove the selected attribute for options that are pre-selected, being careful not to also modify the value of the selected property.

As for the issue with the counters, it can be resolved by performing an update when the page loads. Specifically, this line will refresh the component, ensuring the counters appear correctly:
ECL.components.get(document.querySelector('[data-ecl-select-multiple]')).update(0);

Hope this helps with the issues :D

Thanks!

[planctus]

The issue(s) have been fixed in 5.x, it's likely that we will have the chance to also do the same in v4 in the next weeks.