[Bug Report] el-select component is enabled (automatic-dropdown) property is not normal

[xiaofan007]

Element UI version

2.13.2

OS/Browsers version

win10_1909 Edge_81.0.416.64

Vue version

2.6.11

Reproduction Link

https://codepen.io/xiaofan007/pen/KKdJKzP?editable=true%3Dhttps%3A%2F%2Felement.eleme.cn%2F

Steps to reproduce

Mouse click on the el-select component with enabled 'automatic-dropdown' property

What is Expected?

The drop-down box displays normally when the el-select component enables the "auto drop-down" property.

What is actually happening?

When the el-select component is enabled 'automatic-dropdown' property, the first click on the component is not normal, and it will be displayed normally only when it is clicked again is enabled.

[Super-jie6]

遇到同问题 唯独点击下拉箭头时正常 第一次点击选择框空白处闪烁 第二次点击正常 bug出现在V2.12.0以上版本

[dyrilyz]

I looked at his code and found that after the handleFocus function was executed, the toggleMenu function was also executed. So my temporary solution is:

import {Select} from 'element-ui'

const ElSelect = {
  mixins: [Select],
  data() {
    return { focusStatus: false }
  },
  methods: {
    toggleMenu() {
      if (this.focusStatus) return this.focusStatus = false
      Select.methods.toggleMenu.call(this)
    },
    handleFocus(event) {
      if (!this.focusStatus) {
        this.focusStatus = true
        event.stopPropagation()
      }
      Select.methods.handleFocus.call(this, event)
    },
    handleBlur(event) {
      this.focusStatus = false
      Select.methods.handleBlur.call(this, event)
    },
  },
}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.