React-select: optgroups

[kopancek]

Is there a way of having option groups, like the standard optgroup element in html select?

[piecyk]

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?

[acthp]

I also need this, immediately. Is there work in progress, or should I fork?

[Venkatrao727]

+1

[TSMMark]

+1

Anyone working on this?

[whather]

I also would love this. Planning on switching from Selectize.js (which has optgroup support) to this, but would need this functionality first.

[rick-li]

+1

[guillaumepiot]

+1

[dcousens]

We're accepting PRs, so don't feel bad if you beat @jossmac to it. It currently isn't on the hit list.

[jossmac]

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

[rory-eiq]

+1

[zenjyn]

@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.

[piecyk]

@zenjyn :+1: 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"    
  }
];

[zenjyn]

@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?

[grydstedt]

+1

[banderson]

@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

[zenjyn]

@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.

[agrass]

+1

[tineo]

+1

[lanceschi]

:+1:

[thataustin]

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.

[piecyk]

@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 :+1:

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)}
///>

[mqklin]

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,
  });
});
...

Result:

[thataustin]

@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 2ems.

Is that right? Or does your css only target grouped options somehow?

[mqklin]

@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/> 

[vgoklani]

+1

[TrevorBurnham]

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!

[TSMMark]

@TrevorBurnham <3

[asazernik]

@TrevorBurnham Be still my beating heart!

[derekperkins]

@TrevorBurnham Are you going to push that back upstream here?

[TrevorBurnham]

@derekperkins It's not up to me. I'd certainly be happy to see it merged in.

[tBaxter]

+1

This NEEDS to be included. Let's get Trevor's fork in!

[masonwr]

+1

[tslater]

+1

[srisonti]

+1

[vladop]

+1

[d1ngn1gefe1]

+1

[gus4no]

+1

[bion]

+1

[quangthe]

Any plan for this feature?

[maswin]

+1

[themetis]

+1

[jurgob]

+1

[manugb]

@JedWatson I think https://github.com/HubSpot/react-select-plus should be merged and @TrevorBurnham could be added as a mantainer of this funcionality

[yarnball]

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

[peter-dangelo]

+1

[rabaut]

+1

[alexjesp]

+1

[lomholdt]

+1

[stivaugoin]

+1

[ehartford]

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

[t1mmen]

@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)

[bvaughn]

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.

[piecyk]

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 :dancer:) if some has better idea ping me :+1:

// 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.

[t1mmen]

@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 :)

[bvaughn]

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. 😄

[ehartford]

I'll add 100 USD to the bounty

[JedWatson]

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.

[t1mmen]

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.

[raapperez]

Is there any news about this?

[t1mmen]

@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.

[khenlevy]

+1

[BossGrand]

+1

[junibrosas]

+1

[gate8team]

+1

[jakeseaton]

+1

[TSMMark]

If only GitHub had a reaction feature so I didn't have to get a thousand +1 comment notifications every day.....

[alaingilbert]

Or at least if they had a subscribe feature. So people could subscribe to the thread without having to comment +1...

[geminiyellow]

still working forward?

[vujita]

+1

[Geczy]

seems like a dead request...

[fabioespinosa]

Any updates @JedWatson ? would really really love to see this come true!

[o1dnik]

@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 ?

[o1dnik]

+1

[calvinwyoung]

Make that a total of 35 +1 comments now :)

+1

[FrankRenyu-zz]

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>);
 });

[o1dnik]

@FrankRenyu it does not solve the problem with scrolling-off from the top as far as I understand ?

[sundriver]

+1

[jainamit333]

+1

[drakoniprincessa]

+1

[dannyvassallo]

+1

[Geczy]

unsubscribes

[zhilinstas]

+1

[arumpuspa]

+1

[graphical-iain]

+1

[lucasff]

please stop (spam-)posting +1, just react with the thumbs up!

[chhuang]

+$50

[renanborgez]

+1

[moguelor]

+1

[NicholasKuchiniski]

+1

[JedWatson]

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 🙂

[guillaume86]

@JedWatson brilliant thanks!

Is there a lot of API changes in v2? Do you expect easy migrations or will it be a bit involved?

[JedWatson]

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.

[jossmac]

An end to the +1 emails 🎉

But seriously, I think everyone will be stoked with v2 -- we've really sweated the details.

[s-dezign]

v2 is really great. One question ... How to get group label/object for selected option? for example in onChange method.

Thanks

[JedWatson]

Answer in #2417