Description
Perhaps a breaking change for some so wanted to document it with a possibility to discuss/resolve this later.
Given these props, there are different expectations about the return type.
getOptionLabel
=> string
getOptionValue
=> string
formatOptionLabel
=> react.Node
formatGroupLabel
=> string
The nomenclature suggests that formatGroupLabel
would likely be expected to render a react Node
as well, but instead it is defined to return a string. I say likely expected because the first grouping example on the homepage of the documentation misuses this prop in this exact way.
const formatGroupLabel = data => (
<div style={groupStyles}>
<span>{data.label}</span>
<span style={groupBadgeStyles}>{data.options.length}</span>
</div>
);
export default () => (
<Select
defaultValue={colourOptions[1]}
options={groupedOptions}
formatGroupLabel={formatGroupLabel}
/>
);
While it might not be a big deal to some, misusing these props has an impact on accessibility as it is reliant to relay the label back to the screen reader and will instead return "object object" as the selected option.
Recommendations:
- Add
group
as a possible context forformatOptionLabel
to consolidate the render functions there. - Remove/replace the code example shown above (and possibly other examples) in the documentation to convey best practices.
- Consider adding documentation about accessibility concerns when using
getOptionLabel
andformatGroupLabel
- Consider renaming
formatGroupLabel
togetGroupLabel
in a future major release. - Consider adding console warnings when an object is stringified.
I could create a PR, but wanted to get thoughts on listed considerations before moving forward
Let it also be noted that the accessibility concerns around the current stringification has been noted here: #4134