Recreate elements each time on show

Fixes #580
shipshapecode · Sep 27, 2019 · 4d8210a
1 parent 3f70249
commit 4d8210a
Show file tree

Hide file tree

Showing 3 changed files with 115 additions and 3 deletions.
diff --git a/src/js/step.js b/src/js/step.js
@@ -336,9 +336,7 @@ export class Step extends Evented {
   _show() {
     this.trigger('before-show');
 
-    if (!this.el) {
-      this._setupElements();
-    }
+    this._setupElements();
 
     this.tour.modal.setupForStep(this);
     this._styleTargetElementForStep(this);

diff --git a/test/cypress/integration/destroying-elements.spec.js b/test/cypress/integration/destroying-elements.spec.js
@@ -0,0 +1,84 @@
+import setupTour from '../utils/setup-tour';
+
+describe('destroying-elements', () => {
+  let Shepherd;
+
+  beforeEach(() => {
+    Shepherd = null;
+
+    cy.visit('/test/examples/destroying-elements', {
+      onLoad(contentWindow) {
+        if (contentWindow.Shepherd) {
+          return Shepherd = contentWindow.Shepherd;
+        }
+      }
+    });
+  });
+
+  it('recalculates positioning when element is removed and added', () => {
+    const steps = () => {
+      return [
+        {
+          attachTo: { element: '.first', on: 'bottom' },
+          id: 'first',
+          title: 'First step',
+          text: 'this is fine the first time'
+        },
+        {
+          attachTo: { element: '.second', on: 'bottom' },
+          id: 'second',
+          title: 'Second step',
+          text: 'Please click the destroy button and then the create button. After the First element is created, please click back'
+        }
+      ];
+    };
+
+    const tour = setupTour(Shepherd, {
+      cancelIcon: {
+        enabled: false
+      }
+    }, steps);
+
+    tour.start();
+
+    cy.get('[data-shepherd-step-id="first"]').then((stepElement) => {
+      const initialFirstStepTransform = stepElement[0].style.transform;
+
+      cy.document().then((document) => {
+        tour.next();
+
+        // Remove the first element
+        document.querySelector('.first').remove();
+
+        tour.back();
+
+        cy.wait(500);
+
+        cy.get('[data-shepherd-step-id="first"]').then((stepElement2) => {
+          const secondFirstStepTransform = stepElement2[0].style.transform;
+
+          expect(initialFirstStepTransform).to.not.equal(secondFirstStepTransform);
+          expect(secondFirstStepTransform).to.equal('translate(-50%, -50%)');
+
+          tour.next();
+
+          // Create the first element again
+          const first = document.createElement('div');
+          first.className = 'first';
+          first.textContent = 'First';
+          document.body.appendChild(first);
+
+          tour.back();
+
+          cy.wait(500);
+
+          cy.get('[data-shepherd-step-id="first"]').then((stepElement3) => {
+            const finalFirstStepTransform = stepElement3[0].style.transform;
+            expect(finalFirstStepTransform).to.equal(initialFirstStepTransform);
+            expect(finalFirstStepTransform).to.not.equal('translate(-50%, -50%)');
+          });
+        });
+      });
+    });
+  });
+});
diff --git a/test/examples/destroying-elements.html b/test/examples/destroying-elements.html
@@ -0,0 +1,30 @@
+<html>
+<head>
+  <link rel="stylesheet" href="../../dist/css/shepherd.css"/>
+  <script src="../../dist/js/shepherd.js"></script>
+</head>
+
+<body>
+<style>
+  h1, h2 {
+    font-family: Lato;
+  }
+
+  .first, .second {
+    position: absolute;
+
+    display: inline-block;
+    padding: 50px;
+    background: red;
+  }
+
+  .second {
+    right: 0;
+    background: blue;
+  }
+</style>
+
+<div class="first">First</div>
+<div class="second">Second</div>
+</body>
+</html>