How to separate value and label in a comboBox

General
1

I want to display a Conbobox with different option labels and values. The markup should result into something like this:

<select class="validate valid select" id="#/properties/signal-input">
  <option value="id-1" label="Signal 1"></option>
  <option value="id-2" label="Signal 2"></option>
</select>

I am using react and the vanilla renderer and my schema looks currently like this:

	"signals": {
		"type": "array",
		"items": {
			"type": "object",
			"properties": {
				"signal": {
					"type": "string",
					"enum": [
						"Signal 1",
						"Signal 2"
					]
				}
			}
		}
	}

Of course this does set the value and label equal.

From this discussion, I guessed the schema should more look like this

	"signals": {
		"type": "array",
		"items": {
			"type": "object",
			"properties": {
				"signal": {
					"type": "string",
					"oneOf": [
			                     {const: 'id-1', title: 'Signal 1'},
			                     {const: 'id-2', title: 'Signal 2'}
					]
				}
			}
		}
	}

But this did not work and the rendered item is just a simple input filed. From the implementation here:

I expected that to work.

Maybe my schema is wrong or missing some detail?

Thanks for any help

===
Ralph

2

Hi @rsoika,

Happy new year :wink:

Yes the oneOf: [{const, title] approach is the way to go if you want to encode the value/label pairs within the JSON Schema. However the React Vanilla renderer set does not yet have the capability to understand and render this pattern appropriately.

The good news is that it’s very simple to implement. As you noticed the renderer code itself is already generic and would handle different value/label content just fine. What’s missing is an additional tester and binding to also handle oneOf enums, similar to the React Material implementations.

Of course instead of encoding value/label with oneOfs within the JSON Schema you could also use the i18n support to adapt the label of your enums if that’s a viable option for you.