Support for optgroups

[azriel46d]

I've added support for optgroups Optgroups can be passed as part of the options with the following structure

{
   title: "lorem ipsum" // This is the title of the opt group
   option: []  // the options in that opt group, either as strings or as objects
}

These can be mixed with items not in any opt groups.

What i did is that before setting the mutableOptions, the optgroups are flattened out using the function normaliseOptGroups . In the template there is a check to see if the item is an optgroup to just render a non clickable list item.

[jasontxf]

Hello, Any update to this? I came upon a use case where I need optgroup too.

[bfic]

@sagalbot I am the next person who needs optgroup too

[jd-solanki]

+1

[CeloHill]

+1 pleeease, we all need optgroups and thanks for the component

[leoclo]

+1

[gr8bit]

@sagalbot Hi Jeff, do you have any idea on how you would like to have option groups implemented into vue-select? I'd be happy to code it the way you think fits best into vue-select. We're currently updating our own branch with this PR but I'd rather like to see this (HTML select) feature become part of the project. :) Any input appreciated! This is one example on how we currently use vue-select with selectable optgroups patched in: https://www.dropbox.com/s/lp0y045604beoat/Bildschirmfoto%202020-08-18%20um%2015.27.46.png?dl=0

The HTML select has a rather limited option grouping functionality. <optgroup>-elements only have a label and an optional disabled attribute and can contain one or more <option>-elements. They may not be nested and cannot be selected - the latter might be a feature worth discussing (we're using it that way). https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select

I read (#1177) you don't like to force a data structure for using vue-select which I think is a very good approach. Being able to disable entries is not enough to do real grouping though, especially in regard to style group members differently (indent them) or even disabling a whole group. Maybe, the group-level is needed to not overcomplicate things. After all, it's by all means a "group" so it might as well be treated as one. ;)

[howard-tzw]

Now you can make use of optgroups in [email protected], which is a forked repository exclusively maintained for Vue 3

• repo: https://github.com/howard-tzw/vue3-select
• demo: https://vue3-select.vercel.app/optgroups