From 9c786e0ead203055b61a0976ca778effcb62dc9d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Renato=20de=20Le=C3=A3o?= <renatodeleao@gmail.com>
Date: Thu, 3 Sep 2020 18:26:58 +0100
Subject: [PATCH 1/4] bugfix: exclude iframes inside binding element from
 detection

As reported on https://github.com/ndelvalle/v-click-outside/issues/232

"faux clicks" on iframe buttons (common pattern in social media buttons and other iframe widgets that were inside binding element were wrongly triggering "click-outside" handler.
---
 src/v-click-outside.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/v-click-outside.js b/src/v-click-outside.js
index 503d088d..8db3dbd1 100644
--- a/src/v-click-outside.js
+++ b/src/v-click-outside.js
@@ -30,12 +30,13 @@ function execHandler({ event, handler, middleware }) {
   }
 }
 
-function onFauxIframeClick({ event, handler, middleware }) {
+function onFauxIframeClick({ el, event, handler, middleware }) {
   // Note: on firefox clicking on iframe triggers blur, but only on
   //       next event loop it becomes document.activeElement
   // https://stackoverflow.com/q/2381336#comment61192398_23231136
   setTimeout(() => {
-    if (document.activeElement.tagName === 'IFRAME') {
+    const { activeElement } = document
+    if (activeElement.tagName === 'IFRAME' && !el.contains(activeElement)) {
       execHandler({ event, handler, middleware })
     }
   }, 0)
@@ -80,7 +81,7 @@ function bind(el, { value }) {
     const detectIframeEvent = {
       event: 'blur',
       srcTarget: window,
-      handler: (event) => onFauxIframeClick({ event, handler, middleware }),
+      handler: (event) => onFauxIframeClick({ el, event, handler, middleware }),
     }
 
     el[HANDLERS_PROPERTY] = [...el[HANDLERS_PROPERTY], detectIframeEvent]

From e22831a1648c96d33dcd0142ae4fd50eeb12f3c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Renato=20de=20Le=C3=A3o?= <renatodeleao@gmail.com>
Date: Thu, 3 Sep 2020 18:27:29 +0100
Subject: [PATCH 2/4] =?UTF-8?q?update:=20arguments=20order=20(ocd=20?=
 =?UTF-8?q?=E2=9A=A0=EF=B8=8F)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/v-click-outside.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/v-click-outside.js b/src/v-click-outside.js
index 8db3dbd1..4e58dcad 100644
--- a/src/v-click-outside.js
+++ b/src/v-click-outside.js
@@ -74,7 +74,7 @@ function bind(el, { value }) {
   el[HANDLERS_PROPERTY] = events.map((eventName) => ({
     event: eventName,
     srcTarget: document.documentElement,
-    handler: (event) => onEvent({ event, el, handler, middleware }),
+    handler: (event) => onEvent({ el, event, handler, middleware }),
   }))
 
   if (detectIframe) {

From d2d287fc5119bf31b3e868ee41cd05db3542954b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Renato=20de=20Le=C3=A3o?= <renatodeleao@gmail.com>
Date: Thu, 3 Sep 2020 18:28:06 +0100
Subject: [PATCH 3/4] update: examples with iframe within click outside element

---
 example/src/views/Home.vue | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/example/src/views/Home.vue b/example/src/views/Home.vue
index d43288e6..c0977ba7 100644
--- a/example/src/views/Home.vue
+++ b/example/src/views/Home.vue
@@ -16,6 +16,11 @@
         <p>Click Outside Lime box</p>
       </div>
 
+      <div class="blue-box" v-click-outside="onBlueClick">
+        <p>Click Outside blue box</p>
+        <iframe tabindex="1" class="iframe-button-example" src="/about" />
+      </div>
+
       <iframe class="iframe" src="/about" width="100%" />
     </div>
   </div>
@@ -64,6 +69,10 @@ export default {
     onLimeClick(ev) {
       console.log('Clicked outside Lime!', ev)
     },
+
+    onBlueClick(ev) {
+      console.log(`Clicked outside Blue!`, ev)
+    },
   },
 }
 </script>
@@ -85,6 +94,19 @@ export default {
   height: 50px;
 }
 
+.blue-box {
+  background-color: blue;
+  color: white;
+}
+
+.iframe-button-example {
+  border: 2px solid white;
+  border-radius: 8px;
+  width: 200px;
+  height: 50px;
+  overflow: hidden;
+}
+
 .iframe {
   border: 1px solid lightgrey;
   margin-top: 1em;

From 029d0dbc7d41777ffd622fd876aa700229ef0ac4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Renato=20de=20Le=C3=A3o?= <renatodeleao@gmail.com>
Date: Thu, 3 Sep 2020 18:30:08 +0100
Subject: [PATCH 4/4] =?UTF-8?q?update:=20=F0=9F=8C=88examples=20for=20easi?=
 =?UTF-8?q?er=20debugging?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

too many `console.logs`, colorized them with elements color for easier grasp :nail_care:
---
 example/src/views/Home.vue | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/example/src/views/Home.vue b/example/src/views/Home.vue
index c0977ba7..82dc5e18 100644
--- a/example/src/views/Home.vue
+++ b/example/src/views/Home.vue
@@ -54,24 +54,28 @@ export default {
 
   methods: {
     onYellowClick(ev) {
-      console.log('Clicked outside Yellow!', ev)
+      console.log(
+        '%c Clicked outside Yellow!',
+        'color: yellow; background: black;',
+        ev,
+      )
     },
 
     onRedClick(ev) {
-      console.log('Clicked outside Red!', ev)
+      console.log('%c Clicked outside Red!', 'color: red', ev)
     },
 
     onRedClickMiddleware(ev) {
-      console.log('Middleware from click outside Red!', ev)
+      console.log('%c Middleware from click outside Red!', 'color: red', ev)
       return true
     },
 
     onLimeClick(ev) {
-      console.log('Clicked outside Lime!', ev)
+      console.log('%cClicked outside Lime!', 'color: lime', ev)
     },
 
     onBlueClick(ev) {
-      console.log(`Clicked outside Blue!`, ev)
+      console.log('%c Clicked outside Blue!', 'color: blue', ev)
     },
   },
 }