Comments (13)
Hmm there might be some overlap between this and #27.
from react-select.
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 :)
from react-select.
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?
from react-select.
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.
from react-select.
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?
from react-select.
@dmr That hack breaks when the component is updated because it then renders the current value without running through the filterOption
s.
@wyattanderson Why can't there be an additional displayLabel
prop that is only used for rendering the item? Wouldn't require only minimal changes?
from react-select.
@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)
.
from react-select.
@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
from react-select.
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.
from react-select.
Looks like a copy of #25, but more elaborate. Closing #25 in favour of this.
See partial PR here.
from react-select.
👍 Very interested in having arbitrary React components for menu items!
from react-select.
+1 for this
from react-select.
This can now be done with optionRenderer, valueRenderer and singleValueComponent, available in 0.6.0
from react-select.
Related Issues (20)
- worst thing ever see in my life HOT 2
- Types broken in `React@19` & `Next@15` HOT 4
- CreatableSelect missing all classes HOT 1
- Page crashed in Edge browser with translation
- Clicking outside of the menu does not close a controlled menu
- Unable to select color using voice access commands.
- Async Select Multi: Options Cleared After Selection Despite Persistent Search Term
- how to get the value from select component in a form based on id
- Tooltip not working
- AsyncCreatableSelect not allowing to enter more than character to search or create
- defaultValue text gets truncated with elipsis (...) at the end HOT 1
- how to avoid this select expand while selecting multiple options
- Unexpected behaviour in combination with `react-hook-form` HOT 1
- Select not scrolling to Selected Item when menuPortalTarget={document.body}
- Incorrect user of <label for=FORM_ELEMENT>
- Pressing enter on a button in a custom option component consumes the event before it reaches the custom button. HOT 1
- Tabindex not working HOT 2
- The dropdown does not open in createable select when the search input and the options label do not match
- Clicking on an item using Custom Menu scrolls to top
- Styles not Loading in Remix HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-select.