Select uses all the text from Option and primary and secondary text when used with OptionText

[idrakimuhamad]

When I uses OptionGraphic, OptionMeta and OptionText to extends the regular enhanced options, upon selection is made, the "selected item" take all of text/value from those component and join them together.

For example, if I set the OptionGraphic to use the emoji 😬
While OptionText have primaryText of "Primary" and secondaryText of "Secondary"
And OptionMeta have the meta of "Meta description".

If I selected the option above, or set it as default value, the selected text will show it as:
"😬PrimarySecondaryMeta description"

The line of code that did this

That's probably not what I want to show nor want it to be. How can I control this value?

Link to example. https://codesandbox.io/embed/eager-banzai-pyvg4

And, if you notice, when primaryText and secondaryText are used, the secondary label will be chopped a little bit.

[idrakimuhamad]

For now, I had to do something to overwrite the value set by the package. I used Portal to add the needed component into the place selected item place. I decided to set the existing item opacity to 0 without removing it from the DOM, and added my own.

https://codesandbox.io/embed/eager-banzai-pyvg4

Hopefully we can get some sort of prop that can control this value as in a component or string etc.