Allow any renderable node as an option label (int/string/element) about react-select

[julen]

Hmm there might be some overlap between this and #27.

[drewbanin]

Yeah looks like it's a similar issue (sorry for not commenting there). The other PR suggest changing propTypes from

propTypes: {
  label: React.PropTypes.string.isRequired
}

to

propTypes: {
  label: React.PropTypes.oneOfType([
    React.PropTypes.string,
    React.PropTypes.number
  ]).isRequired
}

The docs (http://facebook.github.io/react/docs/reusable-components.html) say that you can use React.PropTypes.node to permit "anything that can be rendered: numbers, strings, elements or an array containing these types."

I think allowing numbers + strings is great, but allowing numbers, strings, or React elements would be so versatile!

I'm happy to send you a PR but I'm new to contributing to FOSS and don't know how to do that on GitHub :)

[dmr]

We use Select with a custom component as a label and it sort of works meaning it renders.
Select reuses label also for search so search is broken now.
Is anybody experiencing similar things or has a solution?

[wyattanderson]

Select reuses label also for search so search is broken now. Is anybody experiencing similar things or has a solution?

Can confirm. Search is broken because it tries to match against the label directly, which doesn't work very well if label is a component. Would be nice to support this customization.

[dmr]

@wyattanderson

I solved my own issue: You can implement your own filterOption function:

var myFilterOption = function(op, filterValue) {
    var valueTest = String(op.value),
        labelTest = String(op.label ? op.label.props.object.name : '');  // HACK: use component data
    return !filterValue || this.props.matchPos === "start" ? this.props.matchProp !== "label" && valueTest.toLowerCase().substr(0, filterValue.length) === filterValue || this.props.matchProp !== "value" && labelTest.toLowerCase().substr(0, filterValue.length) === filterValue : this.props.matchProp !== "label" && valueTest.toLowerCase().indexOf(filterValue.toLowerCase()) >= 0 || this.props.matchProp !== "value" && labelTest.toLowerCase().indexOf(filterValue.toLowerCase()) >= 0;
};

return (
    <Select filterOption={myFilterOption} ... />
);

The code is copied from the Select.js class and it is sort of hacky because it uses a subcomponent's data but it solved my issue :)

--> I don't understand this issue. Isn't this solved?

[pigulla]

@dmr That hack breaks when the component is updated because it then renders the current value without running through the filterOptions.

@wyattanderson Why can't there be an additional displayLabel prop that is only used for rendering the item? Wouldn't require only minimal changes?

[super-cache-money]

@pigulla Using a displayLabel wouldn't allow custom markup to be rendered. This is pretty useful, like in the Email Contacts example here.

Maybe you ought to be able to specify components as options, which have statics (functions?) defined for value, and searchableTarget.

If it would be more performant to not have to create a ton of components, maybe just a custom render(option) should be specifiable, along with a custom searchableTarget(option).

[dmr]

@pigulla Thanks for pointing me to the update issue. In the application we have right now it seems to work but good to know about limitations

[nemanja-stanarevic]

The way I solved this was to add renderOption property (of type React.PropTypes.func) and tweak buildMenu to return the following:

buildMenu: function() {
...
  return (<div ref={ref} key={'option-' + op.value} className={optionClass} onMouseEnter={mouseEnter} onMouseLeave={mouseLeave} onMouseDown={mouseDown} onClick={mouseDown}>
            { this.props.renderOption ? this.props.renderOption(op) : op.label }
          </div>);
}

It's very simple - literally 4 lines of code and in the spirit of how filterOption / filterOptions properties are exposed already. You can then add additional keys (in addition to value/label pair) into the option object and render the markup accordingly in renderOption using these new keys, e.g.

const renderOption = (option) => (
  <div className="select-option">
    <img src={option.logoUrl}/>
    <h3>{option.label}</h3>
    <p>{option.details}</p>
  </div>);

The downside is that once the option is selected, the control only displays the label of the selected option (rather than showing the full output of renderOption function), but that worked fine for my use case. Since selected value is rendered inside an input element, it would be more involved to show custom selected option.

I am happy to make a pull request if y'all find this helpful.

[dcousens]

Looks like a copy of #25, but more elaborate. Closing #25 in favour of this.

See partial PR here.

[bdefore]

👍 Very interested in having arbitrary React components for menu items!

[tokenvolt]

+1 for this

[bruderstein]

This can now be done with optionRenderer, valueRenderer and singleValueComponent, available in 0.6.0