fix select element can't removeChild optgroup's option

sudongyan · Sep 11, 2015 · 1774e99 · 1774e99
1 parent fe9a3db
commit 1774e99
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 3 deletions.
diff --git a/src/directives/model/select.js b/src/directives/model/select.js
@@ -98,7 +98,12 @@ function initOptions (expression) {
  while (i--) {
  var option = el.options[i]
  if (option !== defaultOption) {
- el.removeChild(option)
+ var parentNode = option.parentNode
+ if (parentNode === el) {
+ parentNode.removeChild(option)
+ } else {
+ el.removeChild(parentNode)
+ }
  }
  }
  buildOptions(el, value)

diff --git a/test/unit/specs/directives/model_spec.js b/test/unit/specs/directives/model_spec.js
@@ -341,8 +341,8 @@ if (_.inBrowser) {
  expect(opts[2].selected).toBe(true)
  })
 
- it('select + options + optgroup', function () {
- new Vue({
+ it('select + options + optgroup', function (done) {
+ var vm = new Vue({
  el: el,
  data: {
  test: 'b',
@@ -365,6 +365,26 @@ if (_.inBrowser) {
  expect(opts[0].selected).toBe(false)
  expect(opts[1].selected).toBe(true)
  expect(opts[2].selected).toBe(false)
+ vm.opts = [
+ { label: 'X', options: ['x', 'y'] },
+ { label: 'Y', options: ['z'] }
+ ]
+ vm.test = 'y'
+ _.nextTick(function () {
+ expect(el.firstChild.innerHTML).toBe(
+ '<optgroup label="X">' +
+ '<option value="x">x</option><option value="y">y</option>' +
+ '</optgroup>' +
+ '<optgroup label="Y">' +
+ '<option value="z">z</option>' +
+ '</optgroup>'
+ )
+ var opts = el.firstChild.options
+ expect(opts[0].selected).toBe(false)
+ expect(opts[1].selected).toBe(true)
+ expect(opts[2].selected).toBe(false)
+ done()
+ })
  })
 
  it('select + options with Object value', function (done) {