Dropdown: prop useLabels

[petlju]

Steps

prop useLabels set to false

Expected Result

http://semantic-ui.com/modules/dropdown.html#/examples
See the Without Labels example
Selected items are displayed as a count of selected items, so if 3 are selected it displays: "3 selected"
Selected items stay in the list with highlighted with bold text and they can be deselected by clicking them.

Actual Result

It is not yet implemented so useLabels currently does nothing

Version

0.63.5

Testcase

http://codepen.io/anon/pen/wgKzOb

[levithomason]

Thanks for adding this per our gitter chat @petlju.

Here are direct links:
http://semantic-ui.com/modules/dropdown.html#maximum-selections (without labels)
http://semantic-ui.com/modules/dropdown.html#text-labels

Also, I like the idea of the comma separated list, although, I only find the feature to support a total count. Where exactly did you find the separated list with overflow ellipsis version?

[petlju]

Ah, my bad. I had changed to that myself when looking at a way to accomplish useLabels. I must have glanced at the wrong window when I wrote the issue, sorry about that. Have updated the issue.

[jamesuejio]

Any update on this? Would really love to have the without labels feature in React. Also if there's any way of customizing the text that gets displayed that would be awesome similar to https://semantic-ui.com/modules/dropdown.html#text-labels

[levithomason]

Would merge a PR from whoever needs this feature. I have no need or funding for it ATM and I haven't heard anything from the core team on it.

[levithomason]

Closing this for housekeeping. Again, we'd love a PR from the community on this.

[thehappycoder]

My quick & dirty solution:

class MyMultiselectDropdown extends Dropdown {
  renderLabels = () => {
    return undefined
  }

  renderText = () => {
    const { placeholder, search } = this.props
    const { searchQuery } = this.state

    const hasSelectedValues = !!this.state.value.length

    const classes = cx(
      placeholder && !hasSelectedValues && "default",
      "text",
      search && searchQuery && "filtered"
    )

    return (
      <div className={classes} role="alert" aria-live="polite">
        {hasSelectedValues
          ? `${this.state.value.length} items`
          : this.props.placeholder}
      </div>
    )
  }
}