vue-select How do I use optgroup?

Hello,

I need to have grouping for option by using optgroup, please let me know if there is any option for the same!

Regards, ImraN

Apr 28 '20 14:04 imrannazirbhat

Unfortunately, no, there's a handful of requests (#131, #184, #342, #355), all linked to the trello backlog item created 3 years ago. Feel free to implement and propose a solution!

May 01 '20 17:05 mix3d

Thanks for compiling that list @mix3d, actually quite helpful. I’ve been very slow to move on this one because I’m not crazy about any solution that involves data requiring a specific structure. So far all the PRs that have come in for it all have require the data to shaped in a specific way. Scoped slots is a much more elegant solution to the problem, solves for optgroups, but also opens itself up for a whole host of other implementations.

To get it right, I think it requires a big refactor to the way options are stored. The scope of the public api also needs to increase so that things like select and deselect can happen reliably in people’s templates. That requires a lot of time on documentation as well. These are things I really want, but my time is limited, so I’ve focused more on small features to keep things improving continually and hope that I’ll have space to do a v4 rewrite that will solve a lot of these problems in the future.

May 01 '20 19:05 sagalbot

And something as simple as an optgroup key on the options objects, (or require a prop specifying which key name, ignoring optgroups if not set), is not robust enough? Removes the need for hierarchical data organization, even if it's a bit redundant, and is still backwards compatible. Downside is course is then how do you sort which group is displayed first. Could provide an array of keys in the order you want? (Hacky)

But if your ideal also includes things like selecting a whole group at a time, for example, then I can see the need for better slot based approaches.

I'm assuming you also don't want to include something "for now" that gets replaced in v4?

May 01 '20 19:05 mix3d

Things are not actually that far off as it stands: https://codepen.io/sagalbot/pen/JjYraqX

I think an API based on functions vs strings is likely going to work a little better. There might actually be a fairly simple way to achieve it. Something like a getOptionGroup function. That function would be responsible for returning a string (or an object) that defines the group of a given object. If that prop is defined, the component then knows we're working with groups, and could adjust to handle it.

May 02 '20 00:05 sagalbot

Any news? Can I help implement this?