From e2e31790daa552ea17f54616f81421c57e851889 Mon Sep 17 00:00:00 2001
From: wacky6 <qjw@wacky.one>
Date: Fri, 12 May 2017 17:26:21 +0800
Subject: [PATCH] Select: add default-first-option

default-first-option: boolean
* if set to `true`, select first matching option on enter
* only works if `filterable` or `remote` is `true`

test is included
---
 packages/select/src/select.vue | 22 ++++++++++++++++-
 test/unit/specs/select.spec.js | 43 ++++++++++++++++++++++++++++++++++
 2 files changed, 64 insertions(+), 1 deletion(-)

diff --git a/packages/select/src/select.vue b/packages/select/src/select.vue
index 01bf4879b..31882c2e9 100644
--- a/packages/select/src/select.vue
+++ b/packages/select/src/select.vue
@@ -191,7 +191,8 @@
         default() {
           return t('el.select.placeholder');
         }
-      }
+      },
+      defaultFirstOption: Boolean
     },
 
     data() {
@@ -264,6 +265,25 @@
           this.broadcast('ElOption', 'queryChange', val);
           this.broadcast('ElOptionGroup', 'queryChange');
         }
+        if (this.defaultFirstOption && (this.filterable || this.remote) && this.filteredOptionsCount) {
+          this.hoverIndex = -1;
+          for (let i = 0; i !== this.options.length; ++i) {
+            const option = this.options[i];
+            if (val) {
+              // pick first options that passes the filter
+              if (!option.disabled && !option.groupDisabled && option.visible) {
+                this.hoverIndex = i;
+                break;
+              }
+            } else {
+              // pick currently selected option
+              if (option.itemSelected) {
+                this.hoverIndex = i;
+                break;
+              }
+            }
+          }
+        }
       },
 
       visible(val) {
diff --git a/test/unit/specs/select.spec.js b/test/unit/specs/select.spec.js
index 1a7b2c3e6..1dc92be2c 100644
--- a/test/unit/specs/select.spec.js
+++ b/test/unit/specs/select.spec.js
@@ -404,6 +404,49 @@ describe('Select', () => {
     }, 10);
   });
 
+  it('default-first-option', done => {
+    vm = createVue({
+      template: `
+        <div>
+          <el-select
+            v-model="value"
+            default-first-option
+            filterable
+          >
+            <el-option
+              v-for="item in options"
+              :label="item"
+              :value="item"
+            />
+          </el-select>
+        </div>
+      `,
+      data() {
+        return {
+          options: ['1', '2', '3', '4', '5'],
+          value: ''
+        };
+      }
+    }, true);
+
+    const select = vm.$children[0];
+    setTimeout(() => {
+      select.$el.querySelector('input').focus();
+      select.query = '3';
+      select.selectedLabel = '3';
+      setTimeout(() => {
+        const enterKey = document.createEvent('Events');
+        enterKey.initEvent('keydown', true, true);
+        enterKey.keyCode = 13;
+        select.$el.querySelector('input').dispatchEvent(enterKey);
+        setTimeout(() => {
+          expect(select.value).to.equal('3');
+          done();
+        }, 10);
+      }, 10);
+    }, 10);
+  });
+
   it('allow create', done => {
     vm = getSelectVm({ filterable: true, allowCreate: true });
     const select = vm.$children[0];