KE-12068 #comment 修复从tab键focus到输入框以及点击输入框无法提示等问题

Upstream PR: ElemeFE#17205

examples/docs/zh-CN/select.md

@@ -191,7 +191,7 @@
 
     created () {
       setTimeout(() => {
-        this.value5 = ['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7', '选项8', '选项9', '选项10', '选项11', '选项12', '选项13', '选项14', '选项15', '选项16', '选项17', '选项18', '选项19', '选项10', '选项21', '选项22', '选项23', '选项24', '选项25', '选项26', '选项27', '选项28', '选项29', '选项30']
+        this.value5 = ['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7', '选项8', '选项9', '选项10', '选项11', '选项12', '选项13', '选项14', '选项15', '选项16', '选项17', '选项18', '选项19', '选项20', '选项21', '选项22', '选项23', '选项24', '选项25', '选项26', '选项27', '选项28', '选项29', '选项30']
       }, 0)
       for (let i = 0; i <= 1000; i++) {
         this.options123.push({value: 'aaa' + i + 1})
@@ -211,7 +211,7 @@
         }
       },
       checkAll () {
-        this.value5 = ['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7', '选项8', '选项9', '选项10', '选项11', '选项12', '选项13', '选项14', '选项15', '选项16', '选项17', '选项18', '选项19', '选项10', '选项21', '选项22', '选项23', '选项24', '选项25', '选项26', '选项27', '选项28', '选项29', '选项30']
+        this.value5 = ['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7', '选项8', '选项9', '选项10', '选项11', '选项12', '选项13', '选项14', '选项15', '选项16', '选项17', '选项18', '选项19', '选项20', '选项21', '选项22', '选项23', '选项24', '选项25', '选项26', '选项27', '选项28', '选项29', '选项30']
       }
     }
   };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyligence-ui",
-  "version": "3.5.6",
+  "version": "3.5.7",
   "description": "powered by kyligence-ui",
   "main": "lib/kyligence-ui.common.js",
   "files": [

packages/select/src/select.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     class="el-select"
+    ref="$root"
     :class="[selectSize ? 'el-select--' + selectSize : '']"
     @click.stop="toggleMenu"
     v-clickoutside="handleClose">
@@ -45,16 +46,16 @@
         :class="[selectSize ? `is-${ selectSize }` : '']"
         :disabled="selectDisabled"
         :autocomplete="autoComplete"
-        @focus="handleFocus"
-        @click.stop
         :clearable="false"
+        @focus="handleFocus"
         @keyup="managePlaceholder"
         @keydown="resetInputState"
         @keydown.down.prevent="navigateOptions('next')"
         @keydown.up.prevent="navigateOptions('prev')"
         @keydown.enter.prevent="selectOption"
         @keydown.esc.stop.prevent="visible = false"
         @keydown.delete="deletePrevTag"
+        @keydown.tab="visible = false"
         v-model="query"
         @input="e => handleQueryChange(e.target.value)"
         :debounce="remote ? 300 : 0"
@@ -152,6 +153,7 @@
   import scrollIntoView from 'kyligence-ui/src/utils/scroll-into-view';
   import { getValueByPath } from 'kyligence-ui/src/utils/util';
   import { valueEquals } from 'kyligence-ui/src/utils/util';
+  import { isFocusFromTab } from 'kyligence-ui/src/utils/dom';
   import NavigationMixin from './navigation-mixin';
 
   const sizeMap = {
@@ -595,6 +597,9 @@
       handleFocus(event) {
         if (!this.softFocus) {
           this.$emit('focus', event);
+          if (isFocusFromTab(event, this.$refs.$root)) {
+            this.visible = true;
+          }
         } else {
           this.softFocus = false;
         }

src/utils/dom.js

@@ -172,3 +172,23 @@ export function setStyle(element, styleName, value) {
     }
   }
 };
+
+export function isFocusFromTab(event, parentNode) {
+  const hasRelatedTarget = event.relatedTarget;
+  if (hasRelatedTarget) {
+    return !getParents(event.relatedTarget).includes(parentNode);
+  }
+  return false;
+}
+
+export function getParents(el) {
+  let currentEl = el;
+  const parents = [];
+  while (currentEl.parentNode && currentEl.nodeType !== 9) {
+    currentEl = currentEl.parentNode;
+    if (currentEl.nodeType === 1) {
+      parents.push(currentEl);
+    }
+  }
+  return parents;
+}