fix(tooltip+popover components): Delay instantiation on mounted() (#969)

* [tooltip] Delay instantiation of tooltip via $nextTick() * [popover component]: delay instantiation of popover via $nextTick() * [tooltip] Check for '#' in target-id * [popover] remove redundant tests
bootstrap-vue · Aug 30, 2017 · 4fc18ec · 4fc18ec
1 parent 5c35e07
commit 4fc18ec
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 37 deletions.
diff --git a/lib/components/popover.vue b/lib/components/popover.vue
@@ -56,22 +56,21 @@
         mounted() {
             if (this.targetId) {
                 let target = this.targetId;
-                if (!target) {
-                    return;
-                }
-                target = document.getElementById(/^#/.test(target) ? target.slice(1) : target);
-                if (target && !this.popOver) {
-                    // We pass the title & content as part of the config
-                    this.popOver = new PopOver(target, this.getConfig(), this.$root);
-                    this.$on('close', this.onClose);
-                    // Observe content Child changes so we can notify popper of possible size change
-                    observeDom(this.$refs.content, this.updatePosition.bind(this), {
-                        subtree: true,
-                        childList: true,
-                        attributes: true,
-                        attributeFilter: ['class', 'style']
-                    });
-                }
+                this.$nextTick(() => {
+                    target = document.getElementById(/^#/.test(target) ? target.slice(1) : target);
+                    if (target && !this.popOver) {
+                        // We pass the title & content as part of the config
+                        this.popOver = new PopOver(target, this.getConfig(), this.$root);
+                        this.$on('close', this.onClose);
+                        // Observe content Child changes so we can notify popper of possible size change
+                        observeDom(this.$refs.content, this.updatePosition.bind(this), {
+                            subtree: true,
+                            childList: true,
+                            attributes: true,
+                            attributeFilter: ['class', 'style']
+                        });
+                    }
+                });
             }
         },
         updated() {
@@ -101,10 +100,10 @@
                     offset: this.offset || 0,
                     triggers: isArray(this.triggers) ? this.triggers.join(' ') : this.triggers,
                     callbacks: {
-                        show: (evt) => this.$emit('show', evt),
-                        shown: () => this.$emit('shown'),
-                        hide: (evt) => this.$emit('hide', evt),
-                        hidden: () => this.$emit('hidden')
+                        show: (evt) => this.onShow(evt),
+                        shown: (evt) => this.onShown(evt),
+                        hide: (evt) => this.onHide(evt),
+                        hidden: (evt) => this.onHidden(evt)
                     }
                 };
             }
@@ -136,7 +135,23 @@
                     cfg.html = true;
                 }
                 return cfg;
-          }
+            },
+            onShow(evt) {
+                this.$emit('show', evt);
+            },
+            onShown(evt) {
+                this.$emit('shown');
+            },
+            onHide(evt) {
+                this.$emit('hide', evt)
+            },
+            onHidden(evt) {
+                // bring our content back if needed to keep Vue happy
+                // Tooltip class will move it back to $tip when shown again
+                this.$el.appendChild(this.$refs.title);
+                this.$el.appendChild(this.$refs.content);
+                this.$emit('hidden');
+            }
         }
     };
 </script>
diff --git a/lib/components/tooltip.vue b/lib/components/tooltip.vue
@@ -50,18 +50,22 @@
         },
         mounted() {
             if (this.targetId) {
-                const target = document.body.querySelector(`#${this.targetId}`);
-                if (target && !this.toolTip) {
-                    // We pass the title as part of the config
-                    this.toolTip = new ToolTip(target, this.getConfig(), this.$root);
-                    // Observe content Child changes so we can notify popper of possible size change
-                    observeDom(this.$refs.title, this.updatePosition.bind(this), {
-                        subtree: true,
-                        childList: true,
-                        attributes: true,
-                        attributeFilter: ['class', 'style']
-                    });
-                }
+                let target = this.targetId;
+                this.$nextTick(() => {
+                    // Ensure we, and target element, are in document
+                    target = document.getElementById(/^#/.test(target) ? target.slice(1) : target);
+                    if (target && !this.toolTip) {
+                        // We pass the title as part of the config
+                        this.toolTip = new ToolTip(target, this.getConfig(), this.$root);
+                        // Observe content Child changes so we can notify popper of possible size change
+                        observeDom(this.$refs.title, this.updatePosition.bind(this), {
+                            subtree: true,
+                            childList: true,
+                            attributes: true,
+                            attributeFilter: ['class', 'style']
+                        });
+                    }
+                });
             }
         },
         updated() {
@@ -87,10 +91,10 @@
                     offset: this.offset || 0,
                     triggers: isArray(this.triggers) ? this.triggers.join(' ') : this.triggers,
                     callbacks: {
-                        show: (evt) => this.$emit('show', evt),
-                        shown: () => this.$emit('shown'),
-                        hide: (evt) => this.$emit('hide', evt),
-                        hidden: () => this.$emit('hidden')
+                        show: (evt) => this.onShow(evt),
+                        shown: (evt) => this.onShown(evt),
+                        hide: (evt) => this.onHide(evt),
+                        hidden: (evt) => this.onHidden(evt)
                     }
                 };
             }
@@ -111,6 +115,21 @@
                     cfg.html = true;
                 }
                 return cfg;
+            },
+            onShow(evt) {
+                this.$emit('show', evt);
+            },
+            onShown(evt) {
+                this.$emit('shown');
+            },
+            onHide(evt) {
+                this.$emit('hide', evt)
+            },
+            onHidden(evt) {
+                // bring our content back if needed to keep Vue happy
+                // Tooltip class will move it back to tip when shown again
+                this.$el.appendChild(this.$refs.title);
+                this.$emit('hidden');
             }
         }
     };