Add support for nested option groups

[pfgallagher]

This code originates from the following PRs in the main react-select repo: #2750 and #3265, written / submitted by Lolobstant and mastergenius, respectively. This is simply a re-submittal of #3265; I haven't made any modifications of my own.

I'm not exactly sure why these PRs were closed, given this appears to be a popular feature request. It looks like it may be due to failing builds. I was able to get this to build locally, so perhaps the tests have changed since the previous PR?

If there are any problems with the build, I'm happy to take care of them. Additionally, if any of the changes to the docs, tests, etc. that Lolobstant originally made need to be integrated too, I can handle those, as well.

Thanks!

[changeset-bot]

⚠️ No Changeset found

Latest commit: 53b9bed

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[dlipeles]

👍

[angle943]

🙏

[Faran52]

Please merge this I need this feature.

[Iuriy-Budnikov]

Any updates?

[Iuriy-Budnikov]

1 year left and there is no support of nested properties!

[egertaia]

As I am currently away from the computer I cant submit a commit to this pull-request.
You could add this to increase coverage instead of decreasing it.
Maybe this increases the chance for this to be merged after few years of waiting.

test('to render nested groups if there is any', () => {
  const options = [
    {
      label: 'group 1',
      options: [
        {
          label: 'nested group 1',
          options: [
            {
              label: 'nested 1',
              value: 1
            },
            {
              label: 'nested 2',
              value: 2
            }
          ]
        }
      ],
    }
  ];
  const selectWrapper = mount(
    <Select options={options} menuIsOpen inputValue="" />
  );

  expect(selectWrapper.find('Group').length).toBe(2);
  expect(selectWrapper.find('Group').find('Option').length).toBe(2);
});

[egertaia]

@flexdinesh Do you think this is something we could get merged as well?
This adds a well requested feature to nest something even further.

[marcelltoth]

Implemented in my public fork react-select-reborn version 3.2.0. Available on NPM.

[jrock17]

Definitely need this. Thanks!

[sdivelbiss]

👍

[dlipeles]

+1

[ivoreis]

@JedWatson / @gwyneplaine / @flexdinesh any blockers with this PR?

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 53b9bed:

Sandbox	Source
react-codesandboxer-example	Configuration

[bladey]

This looks great @pfgallagher, apologies for the slow response.

I've created a working example here - https://codesandbox.io/s/react-codesandboxer-example-8xxyx?file=/index.js

We will need updates to documentation and tests as you suggested, but hold off until I can speak to @JedWatson, we can then get this merged.

[tofsjonas]

Come on @JedWatson, you can do it!!!!! 🏃‍♂️🏃‍♀️🏃💐

[AndrewKarasek]

Hey @JedWatson are there any plans to merge this? Happy to contribute to the docs & tests if those are the blockers?

[ivoreis]

Hi @bladey, do you know what the current blockers are? Anything we can do to help?

[Methuselah96]

I've started a fork of react-select. Feel free to resubmit this PR on the fork and we can get it merged and released.

EDIT: 🎉 I've archived the fork now that we've got some momentum in this repo and Jed is involved again. Sorry for the disturbance!

[arushs]

Anything blocking this merge now?

[ebonow]

Greetings,

Much of the primary focus has been on trying to resolve underlying issues and making a transition to TypeScript.

Nested groups do represent a bit of a concern in regards to code complexity as the MenuList would now be recursively traversing the options and as the buildFocusableOptionsFromCategorizedOptions is currently implemented, the options rendering does likely require a bit more attention. Additionally there are accessibility concerns to be addressed already regarding Groups let alone how to properly convey nested group information via a screen reader.

I have created a Feature Request discussion here to gauge interest and talk through some of these things.

[vaasu]

can anyone fix the merge conflicts and merge this?

[ankitdsgn]

How to style the nested labels? I can't find anything :) plz help

[kaiiiiiiiii]

Any updates on this one @JedWatson ?

[Anjups007]

Can we have this feature published please.

[naheller]

two. years. and still not merged. open source is tough!

[HabibaGadalla]

👀

[jsutaria]

+1 need this

[MontejoJorge]

👀