Tooltip: displays when initial value is true (#14826)

packages/tooltip/src/main.js

@@ -1,7 +1,6 @@
 import Popper from 'element-ui/src/utils/vue-popper';
 import debounce from 'throttle-debounce/debounce';
 import { addClass, removeClass, on, off } from 'element-ui/src/utils/dom';
-import { getFirstComponentChild } from 'element-ui/src/utils/vdom';
 import { generateId } from 'element-ui/src/utils/util';
 import Vue from 'vue';
 
@@ -54,15 +53,11 @@ export default {
 
   data() {
     return {
+      tooltipId: `el-tooltip-${generateId()}`,
       timeoutPending: null,
       focusing: false
     };
   },
-  computed: {
-    tooltipId() {
-      return `el-tooltip-${generateId()}`;
-    }
-  },
   beforeCreate() {
     if (this.$isServer) return;
 
@@ -98,16 +93,13 @@ export default {
         </transition>);
     }
 
-    if (!this.$slots.default || !this.$slots.default.length) return this.$slots.default;
+    const firstElement = this.getFirstElement();
+    if (!firstElement) return null;
 
-    const vnode = getFirstComponentChild(this.$slots.default);
+    const data = firstElement.data = firstElement.data || {};
+    data.staticClass = this.addTooltipClass(data.staticClass);
 
-    if (!vnode) return vnode;
-
-    const data = vnode.data = vnode.data || {};
-    data.staticClass = this.concatClass(data.staticClass, 'el-tooltip');
-
-    return vnode;
+    return firstElement;
   },
 
   mounted() {
@@ -132,6 +124,14 @@ export default {
       on(this.referenceElm, 'blur', this.handleBlur);
       on(this.referenceElm, 'click', this.removeFocusing);
     }
+    // fix issue https://github.com/ElemeFE/element/issues/14424
+    if (this.value && this.popperVM) {
+      this.popperVM.$nextTick(() => {
+        if (this.value) {
+          this.updatePopper();
+        }
+      });
+    }
   },
   watch: {
     focusing(val) {
@@ -164,9 +164,12 @@ export default {
       this.focusing = false;
     },
 
-    concatClass(a, b) {
-      if (a && a.indexOf(b) > -1) return a;
-      return a ? b ? (a + ' ' + b) : a : (b || '');
+    addTooltipClass(prev) {
+      if (!prev) {
+        return 'el-tooltip';
+      } else {
+        return 'el-tooltip ' + prev.replace('el-tooltip', '');
+      }
     },
 
     handleShowPopper() {
@@ -202,6 +205,18 @@ export default {
         clearTimeout(this.timeoutPending);
       }
       this.expectedState = expectedState;
+    },
+
+    getFirstElement() {
+      const slots = this.$slots.default;
+      if (!Array.isArray(slots)) return null;
+      let element = null;
+      for (let index = 0; index < slots.length; index++) {
+        if (slots[index] && slots[index].tag) {
+          element = slots[index];
+        };
+      }
+      return element;
     }
   },
 

src/utils/vdom.js

@@ -3,7 +3,3 @@ import { hasOwn } from 'element-ui/src/utils/util';
 export function isVNode(node) {
   return node !== null && typeof node === 'object' && hasOwn(node, 'componentOptions');
 };
-
-export function getFirstComponentChild(children) {
-  return children && children.filter(c => c && c.tag)[0];
-};

src/utils/vue-popper.js

@@ -70,9 +70,7 @@ export default {
     },
 
     showPopper(val) {
-      if (this.disabled) {
-        return;
-      }
+      if (this.disabled) return;
       val ? this.updatePopper() : this.destroyPopper();
       this.$emit('input', val);
     }