How do I use optgroup? - Githubissues

sagalbot / vue-select

Everything you wish the HTML <select> element could do, wrapped up into a lightweight, extensible Vue component.

https://vue-select.org

MIT License

4.64k stars 1.34k forks source link

How do I use optgroup? #1177

Open imrannazirbhat opened 4 years ago

imrannazirbhat commented 4 years ago

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

mix3d commented 4 years ago

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!

sagalbot commented 4 years ago

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.

mix3d commented 4 years ago

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?

sagalbot commented 4 years ago

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.