Select: focusing does not show popper (#9894)

packages/select/src/select.vue

@@ -2,11 +2,11 @@
   <div
     class="el-select"
     :class="[selectSize ? 'el-select--' + selectSize : '']"
+    @click.stop="toggleMenu"
     v-clickoutside="handleClose">
     <div
       class="el-select__tags"
       v-if="multiple"
-      @click.stop="toggleMenu"
       ref="tags"
       :style="{ 'max-width': inputWidth - 32 + 'px' }">
       <span v-if="collapseTags && selected.length">
@@ -79,7 +79,6 @@
       :class="{ 'is-focus': visible }"
       @focus="handleFocus"
       @blur="handleBlur"
-      @mousedown.native="handleMouseDown"
       @keyup.native="debouncedOnInputChange"
       @keydown.native.down.stop.prevent="navigateOptions('next')"
       @keydown.native.up.stop.prevent="navigateOptions('prev')"
@@ -520,7 +519,6 @@
       },
 
       handleFocus(event) {
-        this.visible = true;
         this.$emit('focus', event);
       },
 
@@ -531,16 +529,6 @@
       handleIconClick(event) {
         if (this.iconClass.indexOf('circle-close') > -1) {
           this.deleteSelected(event);
-        } else {
-          this.toggleMenu();
-        }
-      },
-
-      handleMouseDown(event) {
-        if (event.target.tagName !== 'INPUT') return;
-        if (this.visible) {
-          this.handleClose();
-          event.preventDefault();
         }
       },
 
@@ -674,8 +662,12 @@
       },
 
       selectOption() {
-        if (this.options[this.hoverIndex]) {
+        if (!this.visible) {
-          this.handleOptionSelect(this.options[this.hoverIndex]);
+          this.toggleMenu();
+        } else {
+          if (this.options[this.hoverIndex]) {
+            this.handleOptionSelect(this.options[this.hoverIndex]);
+          }
         }
       },
 

test/unit/specs/select.spec.js

@@ -440,7 +440,7 @@ describe('Select', () => {
     };
     vm = getSelectVm({ filterable: true, filterMethod });
     const select = vm.$children[0];
-    select.$el.querySelector('input').focus();
+    select.$el.click();
     setTimeout(() => {
       select.selectedLabel = '面';
       select.onInputChange();
@@ -479,7 +479,7 @@ describe('Select', () => {
 
     const select = vm.$children[0];
     setTimeout(() => {
-      select.$el.querySelector('input').focus();
+      select.$el.click();
       select.query = '3';
       select.handleQueryChange('3');
       select.selectOption();