Select: fix slice of value when value is undefined or null (ElemeFE#1…

…5022)
lzq4047 · May 22, 2020 · 801c1c0 · 801c1c0
1 parent 71c34dc
commit 801c1c0
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 4 deletions.
diff --git a/packages/select/src/option.vue b/packages/select/src/option.vue
@@ -109,10 +109,10 @@
 
       contains(arr = [], target) {
         if (!this.isObject) {
-          return arr.indexOf(target) > -1;
+          return arr && arr.indexOf(target) > -1;
         } else {
           const valueKey = this.select.valueKey;
-          return arr.some(item => {
+          return arr && arr.some(item => {
             return getValueByPath(item, valueKey) === getValueByPath(target, valueKey);
           });
         }

diff --git a/packages/select/src/select.vue b/packages/select/src/select.vue
@@ -346,7 +346,7 @@
       value(val, oldVal) {
         if (this.multiple) {
           this.resetInputHeight();
-          if (val.length > 0 || (this.$refs.input && this.query !== '')) {
+          if ((val && val.length > 0) || (this.$refs.input && this.query !== '')) {
             this.currentPlaceholder = '';
           } else {
             this.currentPlaceholder = this.cachedPlaceHolder;
@@ -671,7 +671,7 @@
 
       handleOptionSelect(option, byClick) {
         if (this.multiple) {
-          const value = this.value.slice();
+          const value = (this.value || []).slice();
           const optionIndex = this.getValueIndex(value, option.value);
           if (optionIndex > -1) {
             value.splice(optionIndex, 1);

diff --git a/test/unit/specs/select.spec.js b/test/unit/specs/select.spec.js
@@ -843,6 +843,43 @@ describe('Select', () => {
     expect(vm.value).to.be.equal('test');
   });
 
+  it('default value is null or undefined', async() => {
+    vm = createVue({
+      template: `
+        <div>
+          <el-select v-model="value">
+            <el-option
+              v-for="item in options"
+              :label="item.label"
+              :key="item.value"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </div>
+      `,
+
+      data() {
+        return {
+          options: [{
+            value: '选项1',
+            label: '黄金糕'
+          }, {
+            value: '选项2',
+            label: '双皮奶'
+          }],
+          value: undefined
+        };
+      }
+    }, true);
+
+    vm.value = null;
+    await waitImmediate();
+    expect(vm.$el.querySelector('.el-input__inner').value).to.equal('');
+    vm.value = '选项1';
+    await waitImmediate();
+    expect(vm.$el.querySelector('.el-input__inner').value).to.equal('黄金糕');
+  });
+
   describe('resetInputHeight', () => {
     const getSelectComponentVm = (configs) => {
       vm = getSelectVm(configs || {});