Project scenario:
There is a problem with the drop-down box search
Problem Description:
When doing development today, I encountered a bug in elementUI.
When el-select uses the filterable function to search, if you happen to use the Microsoft Pinyin input method, then you may encounter a mismatch between the search result and the input value, as shown in the figure below:
I entered gold, but the result showed that there were double preserved eggs and dragon beard noodles.
Cause Analysis:
Open https://element.eleme.cn/#/zh-CN/component/select
and locate [You can use the search function to quickly find options]
Switch to Microsoft Pinyin input method
Click the search drop-down box to enter "gold", confirm the input Use carriage return or space to confirm, and use keyboard number selection to confirm input. For example, press "1" to confirm the input of "gold".
At this time, the drop-down result has not been updated to only include gold options.
solution:
The project will be launched on Friday, so I can only download the element source code by myself to troubleshoot the problem. Locate to: element-dev\packages\select\src\select.vue code, npm run dev browser to debug.
It is found that when using the Microsoft input method, pressing the above number selection key does not trigger the @keyup.native event. However, el-input in el-select does not use the @input event to monitor changes in input values, causing bugs.
Repair method: Add @input="debouncedOnInputChange" to el-input.
I have already raised the issue to the official. Before the official solution is resolved, you can solve it by yourself according to the above method, then regenerate the reference code with npm run dist, and replace the index.js and index.css under lib with the old version The file is done.