[WIP] option groups #59

[colbyr]

Spent some time working on grouped options for #59. Still rough around the edges but far enough along to share. I'd rather get some feedback before I spend too much time on it 😉

I think I'd prefer a nested structure to a separate "groups" prop. It should work with any number of sub groups as well.

<Select
  options={[{
    label: 'Even',
    options: [
      { label: 'two', value: 2},
      { label: 'four', value: 4 },
    ]
  }, {
    label: 'Odd',
    options: [
      { label: 'One', value: 1 }
    ]
  }]}
/>

TODO

• disabled groups
• tests
• better group styles?
• for multi={true} allow group selection

cc @banderson

[jaimerson]

❤️ 💚 💙 💛 💜

[ESWAT]

Awaiting this with bated breath. 👍

[nickblumenthal]

Same here!

[mping]

@colbyr need some help?

[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:

[oyeanuj]

@colbyr This looks great! Are you planning to have it ready for 1.0 final version? @JedWatson, thoughts?

[colbyr]

I'll gladly polish this up if this is the direction @JedWatson wants to go!

[TrevorBurnham]

@JedWatson I believe this would be a strong addition to react-select.

[vgoklani]

👍

[gondalez]

+1

[jakedahm]

+1

[max-mykhailenko]

When do you plan to merge this? How I can help?

[banderson]

@max-mykhailenko I heard @TrevorBurnham (above) has been working on this functionality in a fork if you want to reach out!

[TrevorBurnham]

The fork @banderson mentioned is now public. We're calling it React Select Plus. It adds option group support as well as some other small features. Please give it a try and let us know what you think!

All of us at HubSpot would still be very happy to see option group functionality added to JedWatson/react-select. /cc @JedWatson

[cedricmessiant]

@TrevorBurnham @banderson @JedWatson Should I use React Select Plus or is there a chance for this feature to be added in React Select ? Is there a pull request ?

[TrevorBurnham]

@cedricmessiant I'd be happy to create an up-to-date pull request if the React Select maintainers expressed interest.

[clbn]

@TrevorBurnham JFYI, there's a bug with "multi + optgroups" in React Select Plus.

[TrevorBurnham]

@clbn Yes, I saw. I just haven't gotten to it yet.

[vgoklani]

@mqklin - your workaround works perfectly.

[kmudrick]

@mqklin this workaround works (thanks!), but with 1.0.0-beta seems to automatically scroll to the first non disabled option (see #825)

[lalitkapoor]

+1

[M3lkior]

I need this feature too !

[evgenTraytyak]

+1

[evgenTraytyak]

@colbyr how can I help you with this PR?

[colbyr]

@evgenTraytyak this PR is pretty stale so I'm going to close it. Feel free repurpose it if you want.

I've been using the react-select-plus fork which supports option groups. The optgroups issue is still open if you want to weight in there #59.