About the reasons for the drop-down BUG of IE with search:

Input in IE does not support readonly and cannot lose focus, but the Element UI by default hides dropdown items so it cannot be searched

Workaround: Manually unfocus the INPUT from IE by using visible-change events to determine when element UI hides drop-down items

Specific implementation methods:

  • 1. Vue files
<el-form-item label="Save" prop="consigneeProvince">
  <el-select v-model="pickForm.consigneeProvince"
             filterable
             ref="consigneeProvince"
             clearable
             placeholder="Please select province"
             @visible-change="inputBlur($event,'consigneeProvince')"
             @change="handleChangeProvince(pickForm.consigneeProvince)">
    <el-option v-for="item in consigneeProvinceOption"
               :key="item.value"
               :label="item.label"
               :value="item.value"></el-option>
  </el-select>
</el-form-item>
Copy the code
  • 2, the methods,
InputBlur (flag,refName){// inputBlur(flag,refName){if(! flag){ this.$refs[refName].$children[0].blur(); }}Copy the code

Note: Visible-change is the method that triggers the element UI dropdown to expand the dropdown. When the dropdown is hidden, the first parameter is false