From e82d34d275eed450126c3cf2743a3c7c435489f0 Mon Sep 17 00:00:00 2001
From: Chuck Carpenter <chuck.carpenter@me.com>
Date: Thu, 30 Aug 2018 14:05:41 -0700
Subject: [PATCH] add onCapture setting to bubble events such as blur for tour
 elements that may not exist

---
 src/js/bind.js         |  8 ++++----
 test/unit/test.step.js | 22 ++++++++++++++++++++++
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/js/bind.js b/src/js/bind.js
index 17c456a10..80afd556f 100644
--- a/src/js/bind.js
+++ b/src/js/bind.js
@@ -26,14 +26,14 @@ export function bindAdvance() {
   const handler = _setupAdvanceOnHandler.call(this, selector);
 
   // TODO: this should also bind/unbind on show/hide
-  if (!isUndefined(selector)) {
-    const el = document.querySelector(selector);
+  const el = document.querySelector(selector);
+  if (!isUndefined(selector) && el) {
     el.addEventListener(event, handler);
   } else {
-    document.body.addEventListener(event, handler);
+    document.body.addEventListener(event, handler, true);
   }
   this.on('destroy', () => {
-    return document.body.removeEventListener(event, handler);
+    return document.body.removeEventListener(event, handler, true);
   });
 }
 
diff --git a/test/unit/test.step.js b/test/unit/test.step.js
index 91ec69a93..77bde467b 100644
--- a/test/unit/test.step.js
+++ b/test/unit/test.step.js
@@ -158,6 +158,28 @@ describe('Step', () => {
       assert.isOk(advanced, 'next triggered for advanceOn');
     });
 
+    it('should support bubbling events for nodes that do not exist yet', () => {
+      const event = new Event('blur');
+      let advanced = false;
+
+      const step = new Step({
+        next: () => advanced = true
+      }, {
+        text: ['Shepherd is a javascript library for guiding users through your app. It uses <a href="https://popper.js.org/">Popper.js</a>, another open source library, to position all of its steps.', 'Popper makes sure your steps never end up off screen or cropped by an overflow. Try resizing your browser to see what we mean.'],
+        advanceOn: {
+          selector: 'a[href="https://popper.js.org/"]',
+          event: 'blur'
+        }
+      });
+      step.el = document.body;
+      step.el.hidden = false;
+
+      step.bindAdvance();
+      document.body.dispatchEvent(event);
+
+      assert.isOk(advanced, 'next triggered for advanceOn');
+    });
+
     it('it should call removeEventListener when destoryed', function(done){
       const el = document.createElement('div');
       const body = spy(document.body, 'removeEventListener');