Mulitselect not clearing via Javascript, when page rendered

Expected behavior

mdb.Select.getInstance(document.querySelector('#fldSearchFilterP1')).setValue([]);

should clear the select list.

Actual behavior

select list is not cleared

Resources (screenshots, code snippets etc.)

The clearing of the list does not work under this situation: a) the base HTML page is rendered with the appropriate HTML

  <select id="fldSearchFilterP1" multiple class="select" data-mdb-filter="true" name="p1">
    <option value="v1">Value 1</option>
    <option value="v2">Value 2</option>
    <option value="v3" selected="selected">Value 3</option>
    <option value="v4">Value 4</option>
  </select>

b) note the "Selected" value c) I need to programmatically clear the list, thus the use of setValue([]).

What I found is: 1) The value doesn't clear 2) If I "click" on any of the check box post page render and then setValue([]), the newly selected value clear, but not the original 3) I have also tried to "dispose" of the instance, clear the select via JQuery (confirmed in the dom) and then re-create it with new mdb.Select(id), upon re-creation "Value 2 " is still selected.

Note: this is strictly cosmetic. When I submit the form, "v2" is NOT submitted (as expected), the value is NOT set at the dom layer.

Any suggestions would be greatly appreciated.