zoukankan      html  css  js  c++  java
  • 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-devpackagesselectsrcselect.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替换到老版本的文件就大功告成啦。

  • 相关阅读:
    SSM简单实现文件上传和下载
    Web发送邮件
    scala写算法-快排
    scala写算法-从后缀表达式构造
    scalajs_初体验
    scala写算法-用小根堆解决topK
    scala-Future和Promise
    python基础之函数
    python基础知识(五)
    python基础知识(四)
  • 原文地址:https://www.cnblogs.com/cinser/p/12018961.html
Copyright © 2011-2022 走看看