Select does not render label JSX in selected value

Since version 1.5.0, Grommet’s Select dropdown component can render rich JSX, as long as the JSX is passed into an option’s label. For example, an option authored like this will render as a rich image in the select dropdown:

const options = [
  { label: <img src="http://i.imgur.com/iZS0F7D.jpg" />, value: 2}
  // .. more options ...
];

However, Grommet’s Select component does not support rendering the currently selected value’s label as JSX in dropdown (non-inline) mode. The component only supports strings, which creates a mismatch of expectations.

Instead, the JSX renders as [object Object] upon selection.

---

Expected Behavior

Grommet Select value should be able to render JSX labels as the selected value, as rich labels are supported on the dropdown options.

Actual Behavior

Grommet renders the selected value as a string, resulting in a visual [object Object] when the option.label is JSX.

URL, screen shot, or Codepen exhibiting the issue

https://codepen.io/drewlustro/pen/zzeyxW

Steps to Reproduce

1. Create Grommet Select
2. Provide rich JSX as the label in each option of the form { label: <span>somejsx</span>, value: 100}
3. Activate the dropdown and choose a rich JSX option. Upon selection, the active value renders as a string [object Object] instead of JSX.

Your Environment

• Grommet version: 1.5.0
• Browser Name and version: Chrome 59.0.3071
• Operating System and version (desktop or mobile): macOS 10.12.5 / desktop

---

In Action GIF

[alansouzati]

Yeah this is a limitation of the Select component as of now. The underlying component behind the selected value is an input which does not allow anything but text. I will keep this open and evaluate other solutions for Grommet 2.0. Thanks for raising this issue.

[florianbepunkt]

@drewlustro Thank you