select搜索框首次聚焦，出现了tooltip

Question

老师，源码里和我自己做的，都会有这个问题，远程搜索模式focus聚焦，就会显示下面的
在http://element.vikingship.xyz/components/select.html中没有这个问题

Answer 1

张轩 2023-10-15 09:09:13

同学你好

谢谢你指出的问题 这里确实有一个 bug，在线上被修复了，因为和教学的不是一套代码，基本思路就是，假如是 remote 模式，在第一次focus 的时候，不要显示下拉框，我之后会修复这个功能，同学可以先尝试自己修复一下，再次感谢。

• 慕设计0021481 #1

  张老师：
            您好，针对这个问题，我是这样修改的：
  :class="{ 'is-active': isDropdownShow && isFirstRemoteDropdownShow }"
  
  const isFirstRemoteDropdownShow = computed(() => {
    return props.remote && filteredOptions.value.length > 0
  })
  
  另外，您的页面http://element.vikingship.xyz/components/select.html，远程搜索 select 组件框 那里，用鼠标和键盘都无法选择值，还有一个问题，父组件给与的默认值，在select 组件框里无法得到显示，我是这样修改的：
  const findOption = (value: string) => {
    if (props.modelValue && value === props.modelValue) {
      return { label: value, value: value }
    } else {
      const option = props.options.find((option) => option.value === value)
      return option ? option : null
    }
  }
  
  不妥之处，还请张老师给与指点，谢谢！！

• 慕设计0021481 #2

  张老师：
             您好!
             您在Select里的state给了我很大启发，pinna里的state是全局的state，这里的state是单组件的state，有异曲同工之妙，可以考虑把 远程请求的结果缓存在state里，避免多次请求消耗网络资源，缺点是会增加本地电脑内存资源消耗，增加查询速度倒也无所谓，在state里增加一个属性：remoteQueryResult。
             不妥之处，还请张老师给与指点，谢谢！！

• 慕设计0021481 #3

  张老师：
            您好！
            另外，在 Select 组件的 itemSelect 方法那里，应该是：
  emits('change', e.label)
  emits('update:modelValue', e.label)
  
  否则，非 remote 的其他select框，只能显示索引了。
  
         不妥之处，还请张老师给与指点，谢谢！！