Calling setValue() on a Select with a preselected option som

Expected behavior

I have a select with one of the options having selected="true" enabled, and two links that attempts to select another value.

Both of these are in a snippet at the bottom. I expect clicking the "setToFirstValue" linkto update the label to "All" and the "setToLastValue" link to update the label to "Five".

Actual behavior

While the setToLastValue link does in fact set the fake-label of the select to Five, the setToFirstValue link doesn't do this and in fact sets it to the option that has the selected attribute.

I've dug deep into the MDB Select code, and I have found this is because when MDB unsets the selected attribute, it sets the nativeOption selected attribute to false, but the attribute still remains on the option object.

Later, MDB converts the option tags of the Select back to PlainOption objects, and to determine the selected attribute of these objects, it does a = t.selected || t.hasAttribute("selected"). t.selected evaluates to false, but then it does t.hasAttribute("selected"), which evaluates to true since there's a selected="false" attribute on the tag.

This leads to at least 2 options have "selected=true" enabled with regards to what label needs to be shown. Since MDB loops over all options, even in case of a single select, it uses the last of the selected options.

Resources (screenshots, code snippets etc.)

<select data-mdb-select-init id="selectID">
  <option value="-1">All</option>
  <option value="2" selected="selected">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>
<label class="form-label select-label">Example label</label>

<a href="" onclick="return false;" id="setToFirstValue" class="icon-link">set me To "-1"</a>
<a href="" onclick="return false;" id="setToLastValue" class="icon-link">set me To "5"</a>

I have the following Javascript code to do this:

document.querySelector("#setToFirstValue").addEventListener('click', () => {
        let select = document.getElementById("selectID");
        mdb.Select.getOrCreateInstance(select).setValue("-1");
});
document.querySelector("#setToLastValue").addEventListener('click', () => {
        let select = document.getElementById("selectID");
        mdb.Select.getOrCreateInstance(select).setValue("5");
});

snippet:

https://mdbootstrap.com/snippets/standard/ikan_nak/6193216#js-tab-view