Select: allows user to choose if select focus triggers menu (#10042)

* Select: Preserves focus after options selected

* Select: softFocus: Passing lint
Write test

* Select: Soft focus: Include input ref

* Revert src/index.js

* Update select.vue

* Select: Default focus on select does not open menu. Added attribute for automatic-dropdown. Includes tests

* Select: remove trailing space

* Select: Removing incorrectly applied automatic-update props from input elements

* Select: Fixed up references to correct focus tests

* Select
- Checking if automatic dropdown already revealed menu when toggling menu
- Updating test: removing timeouts for related test

* Update select.vue

packages/select/src/select.vue

@@ -49,6 +49,7 @@
         :disabled="selectDisabled"
         :autocomplete="autoComplete"
         @focus="handleFocus"
+        @blur="softFocus = false"
         @click.stop
         @keyup="managePlaceholder"
         @keydown="resetInputState"
@@ -252,6 +253,7 @@
         type: String,
         default: 'off'
       },
+      automaticDropdown: Boolean,
       size: String,
       disabled: Boolean,
       clearable: Boolean,
@@ -309,6 +311,7 @@
         previousQuery: null,
         inputHovering: false,
         currentPlaceholder: '',
+        menuVisibleOnFocus: false,
         isOnComposition: false
       };
     },
@@ -546,6 +549,10 @@
 
       handleFocus(event) {
         if (!this.softFocus) {
+          if (this.automaticDropdown || event.target.className.indexOf('el-select__input') > -1) {
+            this.visible = true;
+            this.menuVisibleOnFocus = true;
+          }
           this.$emit('focus', event);
         } else {
           this.softFocus = false;
@@ -559,6 +566,7 @@
 
       handleBlur(event) {
         this.$emit('blur', event);
+        this.softFocus = false;
       },
 
       handleIconClick(event) {
@@ -698,7 +706,11 @@
 
       toggleMenu() {
         if (!this.selectDisabled) {
-          this.visible = !this.visible;
+          if (this.menuVisibleOnFocus) {
+            this.menuVisibleOnFocus = false;
+          } else {
+            this.visible = !this.visible;
+          }
           if (this.visible) {
             (this.$refs.input || this.$refs.reference).focus();
           }

test/unit/specs/select.spec.js

@@ -3,7 +3,7 @@ import Select from 'packages/select';
 
 describe('Select', () => {
   const getSelectVm = (configs = {}, options) => {
-    ['multiple', 'clearable', 'filterable', 'allowCreate', 'remote', 'collapseTags'].forEach(config => {
+    ['multiple', 'clearable', 'filterable', 'allowCreate', 'remote', 'collapseTags', 'automaticDropdown'].forEach(config => {
       configs[config] = configs[config] || false;
     });
     configs.multipleLimit = configs.multipleLimit || 0;
@@ -46,7 +46,8 @@ describe('Select', () => {
             :filterMethod="filterMethod"
             :remote="remote"
             :loading="loading"
-            :remoteMethod="remoteMethod">
+            :remoteMethod="remoteMethod"
+            :automatic-dropdown="automaticDropdown">
             <el-option
               v-for="item in options"
               :label="item.label"
@@ -68,6 +69,7 @@ describe('Select', () => {
           collapseTags: configs.collapseTags,
           allowCreate: configs.allowCreate,
           popperClass: configs.popperClass,
+          automaticDropdown: configs.automaticDropdown,
           loading: false,
           filterMethod: configs.filterMethod && configs.filterMethod(this),
           remote: configs.remote,
@@ -668,7 +670,7 @@ describe('Select', () => {
     });
   });
 
-  it('soft focus', done => {
+  it('should return focus to input inside select after option select', done => {
     vm = createVue({
       template: `
         <div>
@@ -701,6 +703,28 @@ describe('Select', () => {
     });
   });
 
+  it('should not open popper when automatic-dropdown not set', done => {
+    vm = getSelectVm();
+
+    vm.$refs.select.$refs.reference.$refs.input.focus();
+
+    vm.$nextTick(_ => {
+      expect(vm.$refs.select.visible).to.be.false;
+      done();
+    });
+  });
+
+  it('should open popper when automatic-dropdown is set', done => {
+    vm = getSelectVm({ automaticDropdown: true });
+
+    vm.$refs.select.$refs.reference.$refs.input.focus();
+
+    vm.$nextTick(_ => {
+      expect(vm.$refs.select.visible).to.be.true;
+      done();
+    });
+  });
+
   it('focus', done => {
     vm = createVue({
       template: `