Fix #6858: Dropdown crashes when label is an empty string #6871
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.
Fix #6858 - resolved a crash when passing an empty string as a label value for the Dropdown's options.
The solution was to make the
getOptionLabel
function in the Dropdown component always return a string. The return value of this function ends up in theDropdownItem
component and it is used directly as a child of thespan
element (if no item template is provided):This clearly shows that there is no intention for the value here to be anything other than a
string
(it could also be aReactNode
of course, in the case of a custom item template being used). Well ok, it can technically also benull
orundefined
, but that doesn't change the point. Further cementing the fact that the return value of thegetOptionLabel
function should always be a string is a call oftoLocaleLowerCase
method on the return value of this function. For example in the Dropdown search logic:The current return value of the
getOptionLabel
function was pretty muchany
, meaning that an entire option object could have also been returned, which has no (apparent) use within the Dropdown component and simply crashes the component.This change also resolves another possible crash when the
optionLabel
prop is provided to the Dropdown component with a custom key/path to a label value from the options object, but the actual key/path on the options object does not exist.Another side effect of this change is that
boolean
values passed as option labels to the Dropdown component now actually get rendered astrue
orfalse
(which is kind of nice, IMO).