react-select Add support for nested option groups

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!

Dec 04 '19 18:12 pfgallagher

⚠️ No Changeset found

Latest commit: 53b9bed0d29468e2feb5b0e3ba7d4f7e3ebb9389

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

Dec 04 '19 18:12 changeset-bot[bot]

👍

Dec 13 '19 23:12 dlipeles

🙏

Dec 30 '19 17:12 angle943

Please merge this I need this feature.

Jan 06 '20 12:01 Faran52

Any updates?

Jan 14 '20 12:01 Iuriy-Budnikov

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

Jan 14 '20 14:01 Iuriy-Budnikov

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

Mar 16 '20 12:03 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.

Mar 17 '20 07:03 egertaia

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

Mar 22 '20 20:03 marcelltoth

Definitely need this. Thanks!

Apr 27 '20 22:04 jrock17

👍

May 07 '20 20:05 sdivelbiss

+1

May 07 '20 21:05 dlipeles

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

May 17 '20 16:05 ivoreis

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 53b9bed0d29468e2feb5b0e3ba7d4f7e3ebb9389:

Sandbox	Source
react-codesandboxer-example	Configuration

Jul 08 '20 05:07 codesandbox-ci[bot]

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.

Jul 08 '20 05:07 bladey

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

Aug 14 '20 19:08 tofsjonas

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

Oct 21 '20 13:10 AndrewKarasek

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

Nov 03 '20 22:11 ivoreis

~~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: :tada: I've archived the fork now that we've got some momentum in this repo and Jed is involved again. Sorry for the disturbance!

Nov 14 '20 16:11 Methuselah96

Anything blocking this merge now?

Feb 10 '21 06:02 arushs

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.