elementUI最新版的el-select使用filterable無效沒法匹配正確搜索結果的Bug解決辦法

Bug描述：

　　今天作開發時遇到一個elementUI存在的bug。

　　當el-select使用filterable功能搜索時，若是你恰巧使用的是微軟拼音輸入法，那麼你有可能會遇到搜索結果和輸入的值不匹配，以下圖：

我輸入的是黃金，結果卻顯示有雙皮蛋，龍鬚麪。

復現辦法：

1. 打開https://element.eleme.cn/#/zh-CN/component/select
2. 定位到【能夠利用搜索功能快速查找選項】
3. 切換成微軟拼音輸入法
4. 點擊搜索下拉框輸入「黃金」，確認輸入時別使用回車或者空格確認，而使用鍵盤數字選擇確認輸入。好比按「1」確認輸入「黃金」
5. 這時候下拉結果並未更新成只包含黃金的選擇項

bug定位與修復辦法：

　　項目週五要上線，只能本身下載element源碼，排查問題了。定位到：element-dev\packages\select\src\select.vue代碼，npm run dev瀏覽器調試起來。
發現當使用微軟輸入法時，按上面的數字選擇鍵並不會觸發@keyup.native事件。而el-select裏面的el-input並未使用@input事件監聽輸入值變化致使bug。
修復方法：el-input中加入@input="debouncedOnInputChange" 便可。

<el-input
ref="reference"
v-model="selectedLabel"
type="text"
:placeholder="currentPlaceholder"
:name="name"
:id="id"
:autocomplete="autoComplete || autocomplete"
:size="selectSize"
:disabled="selectDisabled"
:readonly="readonly"
:validate-event="false"
:class="{ 'is-focus': visible }"
:tabindex="(multiple && filterable) ? '-1' : null"
@focus="handleFocus"
@blur="handleBlur"
@keyup.native="debouncedOnInputChange"
@input="debouncedOnInputChange"
@keydown.native.down.stop.prevent="navigateOptions('next')"
@keydown.native.up.stop.prevent="navigateOptions('prev')"
@keydown.native.enter.prevent="selectOption"
@keydown.native.esc.stop.prevent="visible = false"
@keydown.native.tab="visible = false"
@paste.native="debouncedOnInputChange"
@mouseenter.native="inputHovering = true"
@mouseleave.native="inputHovering = false">
<template slot="prefix" v-if="$slots.prefix">
<slot name="prefix"></slot>
</template>
<template slot="suffix">
<i v-show="!showClose" :class="['el-select__caret', 'el-input__icon', 'el-icon-' + iconClass]"></i>
<i v-if="showClose" class="el-select__caret el-input__icon el-icon-circle-close" @click="handleClearClick"></i>
</template>
</el-input>

　　我已經給官方提issue了，再官方沒解決以前，你們能夠按上述辦法自行解決一下，而後npm run dist從新生成一下引用代碼，再將lib下的index.js和index.css替換到老版本的文件就大功告成啦。

原文出處：https://www.cnblogs.com/cinser/p/12018961.html