Feature Request: Nested Groups

[ebonow]

I am gauging interest in a feature request for nested groups and wanted to reach out to the community to get feedback.

Regarding PR's: #2750, #3265, and #3873

I am creating this as a placeholder to get back to when I have more time to think through a number of considerations but some that appear top of mind are:

• Styling api for nested Group, GroupHeading, group Options
• Screen reader support [BUG] "Grouped" options breaks screen readers #4277
• Existing bug for updating options in groups Options doesn't re-render when updating a grouped options #4250
• How does this work with Createable or isMulti?
• Existing implementation make assumption about options being a group based on the option having a prop called options. While this is not a prerequisite, it certainly seems related to this implementation and perhaps something for us to better design around.
  

  react-select/packages/react-select/src/Select.js

  Lines 1336 to 1340 in 998c979

  	return options.reduce(
  	(acc, item, itemIndex) => {
  	if (item.options) {
  	// TODO needs a tidier implementation
  	if (!this.hasGroups) this.hasGroups = true;

• Accessibility concerns?
• Code complexity

Related Feature Requests

• Tree How to create tree in select #4229
  • If this goes the route of building a Tree, then there are an enormous amount of concerns I have as people begin requesting additional functionality (collapsible, cascading selection (select/unselect all), indeterminate selection, etc...)

While the primary goal is to ensure the intended behavior of react-select is working well and performant, having the ability to support nested groups seems reasonable, but worth understanding impacts and concerns.

Please feel free to add more feedback for us to better gauge support for supporting this.

[jonmifsud]

Nested Groups would be great as this would very much reflect similar structures we have elsewhere. And yes the options does give the impression that it may be a recursive possibility.

To be fair I've not used creatable within a group context. but If I had nested groups and I wanted to use creatable - I'd pop that out to a Modal of sorts to ensure I have my own personal hierarchy right. I wouldn't want react-select to decide that for me. This if not mistaken could be triggered from the existing API anyway.

[mwmcode]

It'd be nice if the library also implemented select-able groups

I saw the example your comment here which does the job for the most part. But it'd be better/easier if react-select offered this out of the box. Something like this would be nice

ng-s.mov

[cpnvr]

This feature has been requested for more than five years and is something that consistently comes up as a priority among react-select users. It would really be awesome if you could focus on making this happen since a lot of people have been asking for it for a long time.

[shehabadel]

Are you guys still up to this request?

[michaelbrant]

Does anyone have a current workaround? What I really want is submenus but this feature would be good too.

[dialformonkey]

Any updates on this feature?

[asdutoit]

I found this solution on one of this repo's discussion threads and just made some minor modifications. Don't remember which thread though.

const Group = (props) => {
  const hasSelectedOption = props.children.some((opt) => opt.props.isSelected);

  const onClick = () => props.selectProps.onChange(props.options);
  return (
    <components.Group
      {...props}
      headingProps={{ ...props.headingProps, hasSelectedOption, onClick }}
    />
  );
};

 <AsyncSelect
        onChange={handleSelectChange}
        // ... other props removed for brevity
        components={{
          Group,
        }}
        value={selected}
        isMulti
        loadOptions={loadSuggestedOptions}
        placeholder="Search for a location"
      />