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

jacobmllr95 · jacobmllr95 · commit 9badfd06daaf · 2019-10-17T02:31:48.000+02:00
diff --git a/src/components/form-select/form-select-option-group.js b/src/components/form-select/form-select-option-group.js
@@ -1,13 +1,13 @@
 import Vue from '../../utils/vue'
-import { isArray } from '../../utils/inspect'
+import { htmlOrText } from '../../utils/html'
+import formOptionsMixin from '../../mixins/form-options'
 import normalizeSlotMixin from '../../mixins/normalize-slot'
-import optionsMixin from './helpers/mixin-options'
 import { BFormSelectOption } from './form-select-option'
 
 // @vue/component
 const BFormSelectOptionGroup = /*#__PURE__*/ Vue.extend({
   name: 'BFormSelectOptionGroup',
-  mixins: [normalizeSlotMixin, optionsMixin],
+  mixins: [normalizeSlotMixin, formOptionsMixin],
   props: {
     label: {
       type: String,
@@ -17,17 +17,13 @@ const BFormSelectOptionGroup = /*#__PURE__*/ Vue.extend({
   render(h) {
     return h('optgroup', { attrs: { label: this.label } }, [
       this.normalizeSlot('first'),
-      this.formOptions.map((option, index) => {
-        const key = `option_${index}_opt`
-        const options = option.options
-        return isArray(options)
-          ? h(BFormSelectOptionGroup, { props: { label: option.label, options }, key })
-          : h(
-              BFormSelectOption,
-              { props: { value: option.value, disabled: option.disabled }, key },
-              option.html || option.text
-            )
-      }),
+      this.formOptions.map((option, index) =>
+        h(BFormSelectOption, {
+          props: { value: option.value, disabled: option.disabled },
+          domProps: htmlOrText(option.html, option.text),
+          key: `option_${index}_opt`
+        })
+      ),
       this.normalizeSlot('default')
     ])
   }
diff --git a/src/components/form-select/form-select.js b/src/components/form-select/form-select.js
@@ -1,5 +1,6 @@
 import Vue from '../../utils/vue'
 import { from as arrayFrom, isArray } from '../../utils/array'
+import { htmlOrText } from '../../utils/html'
 import idMixin from '../../mixins/id'
 import formMixin from '../../mixins/form'
 import formSizeMixin from '../../mixins/form-size'
@@ -133,11 +134,11 @@ export const BFormSelect = /*#__PURE__*/ Vue.extend({
           const options = option.options
           return isArray(options)
             ? h(BFormSelectOptionGroup, { props: { label: option.label, options }, key })
-            : h(
-                BFormSelectOption,
-                { props: { value: option.value, disabled: option.disabled }, key },
-                option.html || option.text
-              )
+            : h(BFormSelectOption, {
+                props: { value: option.value, disabled: option.disabled },
+                domProps: htmlOrText(option.html, option.text),
+                key
+              })
         }),
         this.normalizeSlot('default')
       ]
diff --git a/src/components/form-select/package.json b/src/components/form-select/package.json
@@ -89,7 +89,7 @@
         "slots": [
           {
             "name": "first",
-            "description": "Slot to place options or option groups above options provided via the 'options' prop"
+            "description": "Slot to place options above options provided via the 'options' prop"
           }
         ]
       }

Original file line number	Diff line number	Diff line change
`@@ -89,7 +89,7 @@`
`89`	`89`	`"slots": [`
`90`	`90`	`{`
`91`	`91`	`"name": "first",`
`92`		`- "description": "Slot to place options or option groups above options provided via the 'options' prop"`
	`92`	`+ "description": "Slot to place options above options provided via the 'options' prop"`
`93`	`93`	`}`
`94`	`94`	`]`
`95`	`95`	`}`