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: https://github.com/Dogfalo/materialize/blob/4a68ebd12c85b81e188988760ec6f16899864da3/js/select.js#L365 I'll have a look at it tomorrow :)

[Smankusors]

Fixed on https://github.com/materializecss/materialize/pull/100