Selection fails when React-Super-Select is surrounded by a label

[trygveaa]

When the select element is surrounded by a label element, no option is shown as selected after you select an option. E.g. with this code:

<label>
  test
  <ReactSuperSelect
    dataSource={testData}
    onChange={handlerExample}
  />
</label>

When I select an option, the select still shows "Select an option" and the onChange function is called first with the selected option, and then with undefined.

Since React-Super-Select doesn't create a html select element, it might not make sense to surround it with a label. It should probably not fail when you do it though.

[alsoscotland]

@trygveaa Thanks for using the control.

From the specification for the label tag: https://www.w3.org/TR/html5/forms.html#the-label-element "The activation behavior of a label element for events targeted at interactive content descendants of a label element, and any descendants of those interactive content descendants, must be to do nothing"

Since the control includes many elements with activation behavior (button clicks etc.) I would expect it to behave unpredictably as a child of the label tag.

One option in a semantic html form would be to pair a label with a hidden form input, updating its value whenever the onChange handler fires. The label/hidden-input pair could live next to the super-select as a DOM sibling.