Comments (95)
Guys, i have a workaround:
//react-select-groups.scss
.Select-menu-outer {
.Select-option {
padding-left: 2em;
}
.Select-option.is-disabled {
cursor: default;
padding-left: 1em;
font-weight: bold;
}
}
Then you have to just push disabled values into options
with labels that are group names:
//my-component.js
...
let options = [];
options.push({
label: "ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ",
value: "someUniqueValue",
disabled: true
});
users.map((user) => {
options.push({
label: user.name,
value: user.id,
});
});
...
from react-select.
HubSpot has created a fork with this functionality. We're calling it React Select Plus. Please give it a try and let us know what you think!
from react-select.
Thanks for the bounty offers @t1mmen and @ehartford! this is the first time anybody has actually offered a financial contribution to any of the open source projects I'm a maintainer of.
I'm happy to pick this up and put some focus on getting proper outgroup support into the official react-select release mainly because I think it's a good thing to encourage π
Will look into how it could be implemented and report back soon - I've been setting some time aside to focus on React Select in the next few days/weeks anyway. Going to start by reviewing the prior art of @piecyk and @TrevorBurnham.
from react-select.
please stop (spam-)posting +1, just react with the thumbs up!
from react-select.
I am really happy to say that groups are implemented in my new v2
branch π
Everyone who has +1'd this will be happy to know this was one of the first things we implemented in the new version, and I'm quite happy with how they turned out.
v2 is currently in alpha: see #2208 and the PR #2289
If you want an early preview, it's available here: https://deploy-preview-2289--react-select.netlify.com
Expect it to hit final release sometime towards the end of February.
Now, with great relief, I'm going to close this issue π
from react-select.
+1
This NEEDS to be included. Let's get Trevor's fork in!
from react-select.
Any updates @JedWatson ? would really really love to see this come true!
from react-select.
+1
from react-select.
+1
from react-select.
If only GitHub had a reaction feature so I didn't have to get a thousand +1
comment notifications every day.....
from react-select.
unsubscribes
from react-select.
This would be an incredibly handy feature if it could look something like this-
I found that on this repo here: https://github.com/mvader/react-categorized-tag-input
The demo is here: https://github.com/mvader/react-categorized-tag-input
The main issue with it is: It doesn't "HIDE" a tag once you've added it. Otherwise it's a game changer
from react-select.
Or at least if they had a subscribe
feature. So people could subscribe to the thread without having to comment +1
...
from react-select.
+1
Anyone working on this?
from react-select.
+1
from react-select.
Make that a total of 35 +1
comments now :)
+1
from react-select.
+1
from react-select.
@JedWatson I think https://github.com/HubSpot/react-select-plus should be merged and @TrevorBurnham could be added as a mantainer of this funcionality
from react-select.
still working forward?
from react-select.
seems like a dead request...
from react-select.
+1
from react-select.
+1
from react-select.
I'll add 100 USD to the bounty
from react-select.
@JedWatson Heads up: It's getting real close to the 4 week deadline on my bounty :)
Edit: I'll extend the deadline to 2 week from today's edit (adding 17 days to my original deadline).
The reason I put a deadline on this in the first place, was due to internal deadlines.
We ended up building our own select replacement as this wasn't ready in time. So, even though we don't need this anymore I'd still like to give back to awesome open-source projects I/we use, hence the deadline extension. I hope that's acceptable for Jed.
from react-select.
+1
from react-select.
+1
from react-select.
@JedWatson @bvaughn or anyone else who is a core contributor/is able to implement & release this feature: I'm offering CAD$100 to whoever gets this done (expires 4 weeks from now)
from react-select.
Hey @t1mmen,
For what it's worth, the react-virtualized-select HOC already supports option groups, albeit with a different input-format than the ones shown above.
Check out the "Dynamic Height Options" example here (source here, underlying data source here).
You could pretty easily map from one of the formats above to the format used in my example, eg
var options = [
{optgroup: 'Things', value: "thing1", label: "Thing 1" },
{optgroup: 'Things', value: "thing2", label: "Thing 2" },
{optgroup: 'Things', value: "thing3", label: "Thing 3" },
{optgroup: 'Stuffs', value: "stuff1", label: "Stuff 1" },
{optgroup: 'Piles', value: "pile1", label: "Pile 1" }
];
let currentOptGroup;
options = options.reduce((options, option) => {
if (option.optgroup !== currentOptGroup) {
currentOptGroup = option.optgroup;
options.push({
value: option.optgroup,
type: 'header'
});
}
options.push({
value: option.value,
type: 'option'
});
return options;
}, []);
react-virtualized-select also provides added performance benefits (although it admittedly increases the size of your bundled application slightly since it uses react-virtualized). If you don't want to go the react-virtualized route, I think a similar HOC/decorator approach for this feature may be better than trying to back it into one of the core react-select components.
from react-select.
+1
from react-select.
+1
from react-select.
+1
from react-select.
+1
from react-select.
+1
from react-select.
+1
from react-select.
+1
from react-select.
+1
from react-select.
+1
from react-select.
+1
from react-select.
Is there any news about this?
from react-select.
+1
from react-select.
π
from react-select.
@thataustin i agree the children
is a better name... maybe @JedWatson can share his point of view on this... if this is on road map... there are so many issues and pull request now it's getting hard to follow π
for now we can make simple crazy and naive wrapper, but should work as expected ;)
const MyOptions = [
{
text: "Group 1",
children: [{
id: "one1",
text: "One1"
}, {
id: "two2",
text: "Two2"
}]
},{
text: "Group 2",
children: [{
id: "one2",
text: "One2"
}, {
id: "two2",
text: "Two22"
}]
}
];
function option(value, label, render, disabled = false) {
return {value, label, render, disabled};
}
const transformOptions = options => _.reduce(options, (res, el) => {
const parent = option(el.text, el.text, (<strong>{el.text}</strong>), true);
const children = _.map(el.children, child => _.assign(
{}, option(child.id, child.text, (<span style={{paddingLeft: 10}}>{child.text}</span>)), {parent: el.text}
));
return res.concat(parent).concat(children);
}, []);
const SelectGroups = React.createClass({
getInitialState() {
return {
value: this.props.value,
options: transformOptions(this.props.options)
};
},
optionRenderer(option) {
return option.render;
},
onChange(value) {
this.setState({value});
this.props.onChange(value);
},
filterOptions(options, term, currentValues) {
if (term === this.prevTerm) {
return this.prevOptions;
} else {
const almostReadyOptions = this.props.filterOptions ? this.props.filterOptions(options, term, currentValues)
// very naive filter, maybe ref form react-select and re-use the filterOptions ;)
: _.filter(options, o => o.parent ? _.includes(o.label.toLowerCase(), term.toLowerCase()) : true);
const optionsGroupByParent = _.groupBy(almostReadyOptions, 'parent');
// filter empty parents
const readyOptions = _.filter(almostReadyOptions,
option => option.parent ? option : _.size(optionsGroupByParent[option.value]) > 0);
this.prevTerm = term;
this.prevOptions = readyOptions;
return readyOptions;
}
},
render() {
return (
<Select
{...this.props}
value={this.state.value}
onChange={this.onChange}
optionRenderer={this.optionRenderer}
options={this.state.options}
filterOptions={this.filterOptions}
/>
);
}
});
// use it
//<SelectGroups
// options={MyOptions}
// onChange={val => console.log(val)}
///>
from react-select.
@TrevorBurnham Are you going to push that back upstream here?
from react-select.
@derekperkins It's not up to me. I'd certainly be happy to see it merged in.
from react-select.
+1
from react-select.
+1
from react-select.
+1
from react-select.
+1
from react-select.
+1
from react-select.
+1
from react-select.
+1
from react-select.
+1
from react-select.
+1
from react-select.
+1
from react-select.
+1
from react-select.
+1
from react-select.
+1
from react-select.
+1
from react-select.
+1
from react-select.
Guys, basic you just need to implement 2 function to get optgroups
(as many examples was done in previous comments)
optionRenderer
filterOptions
I encountered one issue, auto scroll to focused element on open. In my code group header are disabled options, so it will scroll to first option of the group and hide the header,
so for groups i extend Select and pass filterOptions, optionRenderer (i know... not so nice, but π) if some has better idea ping me π
// disable scroll when focused element is in menu height, to don't hide first disable option group label
class Select extends ReactSelect.Select {
componentDidUpdate(prevProps, prevState) {
if (this.menu && this.focused && this.state.isOpen) {
const menuNode = ReactDOM.findDOMNode(this.menu);
const focusedOptionNode = ReactDOM.findDOMNode(this.focused);
if (focusedOptionNode.offsetTop + focusedOptionNode.offsetHeight < menuNode.offsetHeight) {
this.hasScrolledToOption = true;
}
}
return super.componentDidUpdate(prevProps, prevState);
}
}
Maybe it will be good idea add group demo to examples @JedWatson ? I can do some PR
and close this issue then.
from react-select.
+1
from react-select.
+1
from react-select.
+1
from react-select.
+1
from react-select.
+1
from react-select.
+1
from react-select.
from react-select.
@TrevorBurnham Be still my beating heart!
from react-select.
Any plan for this feature?
from react-select.
@mqklin I had same (similar) solution, but the problem is with focus on first non-disabled element which moves the dropdown 1 item down and hides the first groupname. Do you have same issue ?
from react-select.
If we only wan to implement "optgroup" on top of "option", we can do something like this. It works for me.
return <option>{props.data}</option>;
};
var options = [];
$.each(this.props.options, function(key, item) {
options.push(<optgroup label={key}>{item.map((data) => <Item data={data}/>)}</optgroup>);
});
from react-select.
+$50
from react-select.
I'm not sure yet - I need to finalise the new API before I can know, and then I'll publish an upgrade guide.
Depends on how much you've customised it. I'm removing a lot of the edge-case props in favour of a more powerful architecture, but I'll try to make the upgrade as simple as possible.
from react-select.
I want to help with this future... i was thinking going with simple structure
var options = [{
label: "Group 1",
children: [{
value: "one",
lable: "One"
}, {
value: "two",
lable: "Two"
}];
is someone started to work on that?
from react-select.
I also need this, immediately. Is there work in progress, or should I fork?
from react-select.
I also would love this. Planning on switching from Selectize.js (which has optgroup support) to this, but would need this functionality first.
from react-select.
We're accepting PRs, so don't feel bad if you beat @jossmac to it. It currently isn't on the hit list.
from react-select.
I'm working almost exclusively on http://elemental-ui.com for the foreseeable future, so I won't be of much help I'm afraid. Incidentally I've implemented a dropdown over there that may be of interest using the following pattern:
var selectOptions = [
{ type: 'option', value: 'option', label: 'Option' },
{ type: 'option', value: 'another-option', label: 'Another option' },
{ type: 'option', value: 'something-else-here', label: 'Something else here' },
{ type: 'divider' },
{ type: 'label', label: 'Select label' },
{ type: 'option', value: 'separated-option', label: 'Separated option' },
];
More here: https://github.com/elementalui/elemental/blob/master/src/components/Dropdown.js
Ping @JedWatson for preferences on implementation details
from react-select.
@JedWatson I'm currently working on this for a project. How would you like this implemented? The interface we need is a variation on the selectize structure, but I can handle that in a wrapper class if you prefer something different:
options: [
{optgroup: 'Things', value: "thing1", label: "Thing 1" },
{optgroup: 'Things', value: "thing2", label: "Thing 2" },
{optgroup: 'Things', value: "thing3", label: "Thing 3" },
{optgroup: 'Stuffs', value: "stuff1", label: "Stuff 1" },
{optgroup: 'Piles', value: "pile1", label: "Pile 1" },
{value: "pile1", label: "Pile 1" }
],
optgroups: [
{position: 1, label: 'Things'},
{position: 2: label: 'Stuffs'}
],
Options with an optgroup not in the optgroup set are ignored. Options without an optgroup are listed last.
from react-select.
@zenjyn π great if you working on public branch i can help with something ( would love to see this merged... and kill select2
at my project
what do you think about something like this ? then you can sort the whole options
array by label (if we have values
the render it as optgroup
)
options: [
{
label: "Thing 1a",
//value: "allThings1a" then in future we can also add selecting the whole group
values: [
{
value: "thing1a", label: "Thing 1a"
},
{
value: "thing2a", label: "Thing 2a"
}
]
},
{
label: "Thing 2b",
values: [
{
value: "thing1b", label: "Thing 1b"
},
{
value: "thing2b", label: "Thing 2b"
}
]
},
{
label: "Thing 3c",
value: "thing3c"
}
];
from react-select.
@piecyk I started with something like that on our end but determined that being able to add, remove, reorder the optgroups in their own array was slightly more flexible for our purposes. I'm still open to something more like your nested structure for the PR, however.
As far as group selecting goes, I wasn't planning on getting into that just yet, but we could make a group select flag then just enable a toggleGroup callback to the onClick event for optgroup divs. Thoughts?
from react-select.
@zenjyn @piecyk any progress on a public branch? I'd be willing to help out too, I need this for a project very soon.
/cc @colbyr
from react-select.
@banderson the optgroup issue for my project was pushed to the backlog almost immediately after I posted on here. I probably won't get to it unless it's still unimplemented by the time the task comes up again. For my project I believe it's on the roadmap 6 months out or so.
from react-select.
Trying to kick this thing up again...
@piecyk - I like your proposed API, but I would rename values
to children
. I think it's a bit more obvious what the purpose is, and a bit easier to read (ie, easier to distinguish between the value
and the children
). Anyone else fine with that API? If we get some more feedback on that API, it will be easier to start in on it.
from react-select.
@mqklin - Just to make sure I understand correctly...
If I want to use both a grouped select box (like the one you show) and a non-grouped select box (the standard react-select box) on the same page, they would both have options that are indented by 2em
s.
Is that right? Or does your css only target grouped options somehow?
from react-select.
@thataustin, you can wrap your grouped select box in a special class :
.myselectbox--grouped {
.Select-menu-outer {/*my previous code*/}
}
<Select className="myselectbox--grouped"/>
//or <div className="myselectbox--grouped"><Select/><div/>
from react-select.
I came here from react-chosen, which says it's deprecated and use react-select... but it has groups and react-select doesn't. no feature parity
from react-select.
@bvaughn Thanks for that! I also know https://github.com/HubSpot/react-select-plus support optgroups.
My bounty is for getting this into the official release of react-select
so I can rely on the official release instead of worrying about forks getting outdated, etc :)
from react-select.
Fair enough! Although worth pointing out that- unlike HubSpot/react-select-plus- bvaughn/react-virtualized-select is not a fork but a decorator and so is less likely to get outdated. Then again it also pulls in an additional dependency on bvaughn/react-virtualized which helps performance but at the cost of bundle size so...trade-offs.
Getting this functionality into react-select core would probably be convenient. Not sure how difficult to implemented it. Unfortunately I won't have the time...but maybe someone else will. π
from react-select.
Thank you @JedWatson, I'm excited about being able to return to react-select
soon :)
Since you'll be tacking this personally, I'd be happy to transfer my share of the bounty now, just let me know how you'd prefer to take payment (email in profile, or DM @t1mmen on Twitter)
This is in no way a condition for my bounty, but if this fits with your vision, I'd really love if this implementation supported nested optgroups and/or ability to select the group label.
Use case would be something like this:
- Tag group
- Tag 1
- Tag 2
- Tag 3
Selecting the Tag group would be an efficient way of adding all subtags.
from react-select.
@FrankRenyu it does not solve the problem with scrolling-off from the top as far as I understand ?
from react-select.
@JedWatson brilliant thanks!
Is there a lot of API changes in v2? Do you expect easy migrations or will it be a bit involved?
from react-select.
An end to the +1
emails π
But seriously, I think everyone will be stoked with v2 -- we've really sweated the details.
from react-select.
v2 is really great. One question ... How to get group label/object for selected option? for example in onChange method.
Thanks
from react-select.
Answer in #2417
from react-select.
Related Issues (20)
- 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 HOT 1
- Styles not Loading in Remix HOT 5
- react-select: 5.8.0 - Selected option only appears in input after focus is lost
- Scroll position resets when loading additional data with onMenuScrollToBottom
- when using onInputChange/inputValue, cursor is positioned to the end of the input field on each keystroke
- [Async Select] The option items in the drop down list can not be accessed with Voice Access
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.