Skip to content

formatGroupLabel returns string but not used that way in documentation #4407

Open
@ebonow

Description

@ebonow

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:

  1. Add group as a possible context for formatOptionLabel to consolidate the render functions there.
  2. Remove/replace the code example shown above (and possibly other examples) in the documentation to convey best practices.
  3. Consider adding documentation about accessibility concerns when using getOptionLabel and formatGroupLabel
  4. Consider renaming formatGroupLabel to getGroupLabel in a future major release.
  5. 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

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions