Unable to disable option Groups to support options with property "options"

[ncrum]

This code assumes that if an Option has a options property then it MUST be a Group. In my use case, I have no need for a Group, but my option object does indeed have an options property, and so the Select assumes it has option groups anyways and excludes most of my options with empty options property.

It seems to me the solution probably involves one or more of the following:

1. Add a prop to Select to allow enabling of groups, e.g. isGrouping, isGroups, etc. Make that part of the condition here instead.
2. Add a prop to allow the user to configure the property that drives option groups, e.g. groupOptionsKey, or a functional version, e.g. getGroupOptions.

Example (notice "Ocean" is filtered out): https://codesandbox.io/s/option-groups-bug-s3pzm

If you guys agree with the issue and any of the solutions and need someone to make a PR, I'd be happy to if it helps. Thanks.

[bladey]

Hi @ncrum,

I wanted to check in and see if you ended up implementing one of your proposed solutions, thanks!

[ncrum]

@bladey I did not. Feel free to take it, as I'm not likely to get around to it, thanks!

[jacklimwenjie]

I was passing options as raw data and use getOptionLabel and getOptionValue prop to extract the label and value, but I kept ran into the following error:

Uncaught TypeError: groupOrOption.options.map is not a function

All this while I have been doing the same to other react-select use sites but have never face this error. Turns out my raw data has an options key which is a nested object, and react-select takes it as a grouped options but failed.

The workaround is to omit the options key in the raw data before passing to the options prop. I do think that having a prop to disable the default behaviour of grouped option would be helpful

[hedwardd]

The workaround is to omit the options key in the raw data before passing to the options prop. I do think that having a prop to disable the default behaviour of grouped option would be helpful

Just ran into this issue myself and ended up doing the same workaround after searching for and failing to find a prop to disable the group behavior.

[vanta240i]

The workaround is to omit the options key in the raw data before passing to the options prop. I do think that having a prop to disable the default behaviour of grouped option would be helpful

Just ran into this issue myself and ended up doing the same workaround after searching for and failing to find a prop to disable the group behavior.

I would love to hear your work-around right now because it's preventing my project from compiling, and it still happens now.

[hedwardd]

The workaround is to omit the options key in the raw data before passing to the options prop. I do think that having a prop to disable the default behaviour of grouped option would be helpful

Just ran into this issue myself and ended up doing the same workaround after searching for and failing to find a prop to disable the group behavior.

I would love to hear your work-around right now because it's preventing my project from compiling, and it still happens now.

@octavian-ene I basically did something like this to remove the options property on each object before passing them to the component:

const withoutOptionsProperty = withOptionsProperty.map(({ options, ...rest }) => ({ ...rest }));

[phazei]

Just came across this myself, it took a while to figure out it was all breaking because my own data had the key "options" in it. Would be nice if it didn't make that presumption or looked for a more unique key to exist, like groupOptions or something.