[HTMLSelect] fix option labels display & use value
as label if not specified
#2679
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Changes proposed in this pull request:
This PR addresses 2 related but different issues with the core/HTMLSelect component:
1) Options' labels are not being rendered
I first noticed this on the Popover example page:
Apparently, React (16.2 at least) does not respect use of the
label
HTML attribute in lieu of child text nodes for<option>
elements (upstream bug?).This PR reverts to specifying labels for
<option>
items as inner HTML, rather than specifying them via the element'slabel
attribute, which appears to display correctly:2) If consumer supplies an array of
{value, label}
plain objects asoptions={...}
, the component does not fallback to using the value ofvalue
as thelabel
in cases wherelabel
is either not supplied or is falsy.I understand that it might seem logical to put the burden of ensuring proper argument syntax on the consumer, but I can foresee cases where this fallback logic would avoid unpleasant surprises, even for consumers who are aware of the proper syntax.
For instance, if consumer supplies:
options={ [{value:1, label:"one"}, {value:2}, {value:3, label:"three"}, {value:4, label:undefined}] }
the the current behavior would be to render options 2 & 4 as empty. The logic in this PR would at least render "2" & "4" respectively.