[MdOption] Cannot read property 'trim' of undefined

[MNSolderstar]

Steps to reproduce

Any HTML in an md-option triggers a Vue Warn reporting an error.

 <md-field>
	<label for="profile">Process Profile</label>
	<md-select v-model="selected.profile" name="" :placeholder="placeholder.profile" id="profile">
		<md-option v-for="(packet,index) in list.profiles" :key="packet.id" :value="index">
			<span>Hello</span> World
		</md-option>
	</md-select>
</md-field>

Which browser?

Google Chrome 67.0.3396.99 (Official Build) (64-bit)
VUE : 2.5.16
VUE Material : 1.0.0-beta-10.2

What is actually happening?

[Vue warn]: Error in created hook: "TypeError: Cannot read property 'trim' of undefined"
TypeError: Cannot read property 'trim' of undefined

Triggered by source:

getTextContent: function getTextContent() {
     if (this.$el) {
       return this.$el.textContent.trim();
     }

     var slot = this.$slots.default;

     return slot ? slot[0].text.trim() : ''; // <--- call to trim() on undefined in this line
},

Reproduction Link

https://codesandbox.io/s/9o9jw9wy4y

[Samuell1]

Hey, Its because you using icon component inside.

[MNSolderstar]

Yes, I need to use color coded icons in the select list in my use case because a text label on it's own is insufficient but it does it if you put any html in there at all.
For example if you want to make the first word bold Hello World

No formatted wrappers are allowed in the label... I don't see why that should not be allowed.

The labels work, just throw a false positive in console.

[MNSolderstar]

I found a work around... putting   in-front of the html tag suppresses the issue... but you have to click the menu option value twice to make it select...

<md-option>
    &nbsp;<span>Hello</span> World
</md-option>

[Samuell1]

If you want to use icons in options use Menu component, select is not created to handle other values then text inside.

[MNSolderstar]

Yes, but if the selection event got the selected items label html content instead of trying to get text only content to use in the select menus selected item display then it would work fine.

There is very little stopping this component from supporting html labels it would be counter intuitive to not have a html select menu support html labeling, after all this does not effect the value set in the :value attribute.

[okolomiets]

any updates on this issue/proposal? it's still not working as expected.

[JuergenSimon]

As of August 2020 there is still no movement on this. Ran into this knife in the belly as well.

[saylestyler]

As of August 2020 there is still no movement on this. Ran into this knife in the belly as well.

extremely knife in the belly 😭

[abhimanusharma]

As of August 2020 there is still no movement on this. Ran into this knife in the belly as well.

@Samuell1
Extremely knife in the belly. Still no update.

[isaachvazquez]

As of August 2020 there is still no movement on this. Ran into this knife in the belly as well.

Still no update. Had to duplicate the md-option component into our app, and rewrite it to work for our needs.