Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

<b-form-select>: Add the variable to make a tree #3222



Copy link

@ab2d3e8 ab2d3e8 commented May 2, 2019

Is it possible to use ' b-form-select ' for a ' optgroup ' from variable:

options: [
{ value: 'A', text: 'Option A' },
{ value: 'B', text: 'Option B' ,
children: [
{ value: 'BA', text: 'Option BA' },
{ value: 'BB', text: 'Option BB' }

@jacobmllr95 jacobmllr95 changed the title Add the variable to make a tree for b-form-select <b-form-select>: Add the variable to make a tree May 2, 2019
Copy link

@tmorehouse tmorehouse commented May 2, 2019

Currently, no, but you can loop through your own options list and generate the appropriate <option> and <optgroup> elements to place inside the default slot of <b-form-select>. Note that the heading of an <optgroup> is not selectable nor can have a value.

This would be hard to implement, as the options array processing is a shared function between <b-form-select>, <b-form-radio-group> and <b-form-checkbox-group> (and the latter two do not support <optgroups>)

Copy link

@mat813 mat813 commented Sep 27, 2019

It would be nice to have a way to do this, instead of having to iterate over my values and craft the option group and options inside them myself.
I do not see the fact that the array processing function is shared as a problem, if it is not used with a select, simply give out an error ;)
Something like this would do:

 {value: 'A', text: 'A'},
 {group: 'B', options: [
  {value: 'C', text: 'C'},

(But in the end, it does not really matter how to express an optgroup, we'll fiddle with our data anyway.)

@tmorehouse tmorehouse added this to To do in 2.1.0 via automation Sep 27, 2019
@tmorehouse tmorehouse reopened this Sep 27, 2019
2.1.0 automation moved this from To do to In progress Sep 27, 2019
Copy link

@tmorehouse tmorehouse commented Sep 27, 2019

We will see if we can get this into release v2.1.0 possibly

@tmorehouse tmorehouse moved this from In progress to Future in 2.1.0 Oct 30, 2019
@tmorehouse tmorehouse added this to Features in Roadmap Oct 30, 2019
@tmorehouse tmorehouse removed this from Future in 2.1.0 Oct 30, 2019
@jacobmllr95 jacobmllr95 added this to To do in 2.2.0 via automation Nov 13, 2019
@jacobmllr95 jacobmllr95 removed this from Features in Roadmap Nov 13, 2019
2.2.0 automation moved this from To do to Done Nov 18, 2019
jacobmllr95 added a commit that referenced this issue Nov 18, 2019
…option-group components (closes #3222) (#4267)

* feat(b-form-select): add group/tree support and dedicated option and option-group components

* Improve option property handling

* Update package.json

* Nested `<optgroup>`'s is invalid HTML...

* remove duplicate import

* Update index.js

* Update mixin-options.js

* Update form-datalist.spec.js

* Create form-select-option.spec.js

* Update form-options.js

* Create form-select-option-group.spec.js

* Update form-select.spec.js

* Improve warnings

* Update form-select.spec.js

* Update form-select.spec.js

* Update

* Update

* Update package.json

* Update _slug.js

* Update componentdoc.vue

* Update

* Update

* Update

* Update

* Update
Copy link

@tmorehouse tmorehouse commented Jan 9, 2020

BootstrapVue v2.2.0 has been released.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment