From 1e9a1c563d0cc2e1d5ff89b65d78bf9cd79b0ba8 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 22 Apr 2022 22:21:53 -0400
Subject: [PATCH] Reuse same popup container in tours

---
 client/src/components/Tour/TourStep.vue | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/client/src/components/Tour/TourStep.vue b/client/src/components/Tour/TourStep.vue
index 4ef5282ee9f..1977628ef29 100644
--- a/client/src/components/Tour/TourStep.vue
+++ b/client/src/components/Tour/TourStep.vue
@@ -2,8 +2,7 @@
     <div
         class="tour-element"
         :class="{ 'tour-element-sticky': !targetElement, 'tour-has-title': !!step.title }"
-        :id="id"
-        :ref="id">
+        ref="tour-element">
         <div v-if="step.title" class="tour-header">
             <div class="tour-title" v-html="step.title"></div>
         </div>
@@ -27,7 +26,6 @@
 
 <script>
 import { createPopper } from "@popperjs/core";
-import sum from "hash-sum";
 
 export default {
     props: {
@@ -41,17 +39,19 @@ export default {
             type: Boolean,
         },
     },
-    data() {
-        return {
-            id: `tour-element-${sum(this.step.element)}`,
-            targetElement: document.querySelector(this.step.element),
-        };
+    computed: {
+        targetElement() {
+            if (this.step.element) {
+                return document.querySelector(this.step.element);
+            }
+            return null;
+        },
     },
     methods: {
         createStep() {
             if (this.targetElement) {
                 this.targetElement.scrollIntoView({ behavior: "smooth" });
-                createPopper(this.targetElement, this.$refs[this.id], {
+                createPopper(this.targetElement, this.$refs["tour-element"], {
                     modifiers: [
                         {
                             name: "preventOverflow",