Material Select "offsets" text when leading or trailing whitespace is present

[limelights]

When creating a Select element with the following markup

<select name="language">
    <option value="EN">
                  English
    </option>
    <option value="EN">
                  Romulan
    </option>   
</select>

the JavaScript will interpret the HTML including the whitespace leading the text "English" and "Romulan" and append it to the generated span element. This causes the selected option text to be offset by X amount of whitespace producing the Codepen below

The offending JavaScript file seems to be:
https://github.com/Dogfalo/materialize/blob/f7390445388813882d3b6948b0f034dec3eb700a/js/forms.js

And offending lines: L416, L418, L425, L427

The fix "could" be a simple .trim() on the HTML to rid the leading and trailing whitespace.

Codepen for not working scenario: http://codepen.io/webhenrik/pen/mEPOwx
Codepen for working scenario: http://codepen.io/webhenrik/pen/jrqVwo

[TheRPunkt]

Same problem here... Is an official fix coming?

[dargmuesli]

I fixed this once for me by simply adding .trim(): https://github.com/Dargmuesli/materialize/commit/b1a32c91b14ef388397e0b4fbac1e314832ee816#diff-338f03716a63d52eee0f79b4510d617c
I guess for v1 it needs to be added (at least) here:

materialize/js/select.js

Line 365 in 4a68ebd

let text = $(el).text();

I'll have a look at it tomorrow :)

[Smankusors]

Fixed on materializecss#100