Material select renders wrong option when using optgroups - select

Question

I'm using Materialize css framework to develop a custom web app for my company.
So at one point I have to display a select containing a few tasks, grouped by project, using optgroups. Every project is different from one another, and so are the related tasks BUT some tasks may have the same name (even if they are stored with different Ids in the database).
To be as precise as possible, let's say my project "Project One" has a task 'R&D' (id=1) and a task 'Developpement' (id=2). My project "Project Two" has a task "Meeting with customer" (id=3) and a task 'R&D' (id=4).
So the original html select has the right option selected (id=4) but the material select rendered has the first option with the name "R&d" selected...
<select id="selectId" name="SelectName">
<option value="">Select Main task</option>
<optgroup label="Project 1">
<option value="420">Task Name 1</option>
<option value="421">Task Name 2</option>
</optgroup>
<optgroup label="Project 3">
<option value="2168">Task Name 7</option>
<option value="2169" selected="selected">Task Name 2</option>
</optgroup>
</select>
renders
<div class="select-wrapper">
<span class="caret">▼</span>
<input type="text" class="select-dropdown" readonly="true" data-activates="select-options-75d04c8c-c252-a1ab-a84a-b5e81f275405" value="Task Name 2">
<ul id="select-options-75d04c8c-c252-a1ab-a84a-b5e81f275405" class="dropdown-content select-dropdown"
style="width: 250px; position: absolute; top: 0px; left: 0px; opacity: 1; display: none;">
<li class=""><span>Select Main task</span></li>
<li class="optgroup"><span>Project 1</span></li>
<li class="optgroup-option "><span>Task Name 1</span></li>
<li class="optgroup-option"><span>Task Name 2</span></li>
<li class="optgroup"><span>Project 3</span></li>
<li class="optgroup-option "><span>Task Name 7</span></li>
<li class="optgroup-option "><span>Task Name 2</span></li>
</ul>
<select id="task_mainTaskQuote" name="task[mainTaskQuote]" required="required" class="initialized">
<option value="">Select Main task</option>
<optgroup label="Project 1">
<option value="420">Task Name 1</option>
<option value="421">Task Name 2</option>
</optgroup>
<optgroup label="Project 2">
<option value="465">Task Name 3</option>
<option value="466">Task Name 4</option>
<option value="467">Task Name 5</option>
<option value="2739">Task Name 6</option>
</optgroup>
<optgroup label="Project 3">
<option value="2168">Task Name 7</option>
<option value="2169" selected="selected">Task Name 2</option>
<option value="2170">Task Name 8</option>
<option value="2180">Task Name 9</option>
<option value="2181">Task Name 10</option>
</optgroup>
</select>
</div>
Here is a jsFiddle about it : https://jsfiddle.net/h7vu2nb1/
Any hints on what I do wrong in this case or on how I can prevent this behaviour?
Thx

Answer 1

This might not be a proper solution but, going through materialize forms.js file on their Github, it appears that the javascript code initializing their select uses the name of the option, not its value. So you are not doing anything wrong, it's just that the way the plugin works doesn't fit your needs.
However regarding your issue I can't provid you more help.