Release 2.1.0

Author: simplesmiler

CHANGELOG.md

@@ -1,3 +1,8 @@
+## [2.1.0] - 2016-11-24
+
+### Changed
+- Away callback may not be triggered until the end of the initial macrotask (fixes #8)
+
 ## [2.0.0] - 2016-10-20
 
 ### Breaking changes
@@ -79,3 +84,4 @@ Initial release
 
 [2.0.0-rc.1]: https://github.com/simplesmiler/vue-clickaway/compare/1.1.5...2.0.0-rc.1
 [2.0.0]: https://github.com/simplesmiler/vue-clickaway/compare/2.0.0-rc.1...2.0.0
+[2.1.0]: https://github.com/simplesmiler/vue-clickaway/compare/2.0.0...2.1.0

README.md

@@ -28,9 +28,9 @@ $ npm install vue-clickaway --save
 From CDN:
 
 ``` html
-<script src="https://cdn.rawgit.com/simplesmiler/vue-clickaway/2.0.0/dist/vue-clickaway.js"></script>
+<script src="https://cdn.rawgit.com/simplesmiler/vue-clickaway/2.1.0/dist/vue-clickaway.js"></script>
 <!-- OR -->
-<script src="https://cdn.rawgit.com/simplesmiler/vue-clickaway/2.0.0/dist/vue-clickaway.min.js"></script>
+<script src="https://cdn.rawgit.com/simplesmiler/vue-clickaway/2.1.0/dist/vue-clickaway.min.js"></script>
 ```
 
 ## Usage

dist/vue-clickaway.common.js

@@ -3,7 +3,7 @@
 var Vue = require('vue');
 Vue = 'default' in Vue ? Vue['default'] : Vue;
 
-var version = '2.0.0';
+var version = '2.1.0';
 
 var compatible = (/^2\./).test(Vue.version);
 if (!compatible) {
@@ -31,10 +31,22 @@ function bind(el, binding) {
     return;
   }
 
+  // @NOTE: Vue binds directives in microtasks, while UI events are dispatched
+  //        in macrotasks. This causes the listener to be set up before
+  //        the "origin" click event (the event that lead to the binding of
+  //        the directive) arrives at the document root. To work around that,
+  //        we ignore events until the end of the "initial" macrotask.
+  // @REFERENCE: https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/
+  // @REFERENCE: https://github.com/simplesmiler/vue-clickaway/issues/8
+  var initialMacrotaskEnded = false;
+  setTimeout(function() {
+    initialMacrotaskEnded = true;
+  }, 0);
+
   el[HANDLER] = function(ev) {
     // @NOTE: IE 5.0+
     // @REFERENCE: https://developer.mozilla.org/en/docs/Web/API/Node/contains
-    if (!el.contains(ev.target)) {
+    if (initialMacrotaskEnded && !el.contains(ev.target)) {
       return callback(ev);
     }
   };

dist/vue-clickaway.js

@@ -2,7 +2,7 @@
 
   Vue = 'default' in Vue ? Vue['default'] : Vue;
 
-  var version = '2.0.0';
+  var version = '2.1.0';
 
   var compatible = (/^2\./).test(Vue.version);
   if (!compatible) {
@@ -30,10 +30,22 @@
       return;
     }
 
+    // @NOTE: Vue binds directives in microtasks, while UI events are dispatched
+    //        in macrotasks. This causes the listener to be set up before
+    //        the "origin" click event (the event that lead to the binding of
+    //        the directive) arrives at the document root. To work around that,
+    //        we ignore events until the end of the "initial" macrotask.
+    // @REFERENCE: https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/
+    // @REFERENCE: https://github.com/simplesmiler/vue-clickaway/issues/8
+    var initialMacrotaskEnded = false;
+    setTimeout(function() {
+      initialMacrotaskEnded = true;
+    }, 0);
+
     el[HANDLER] = function(ev) {
       // @NOTE: IE 5.0+
       // @REFERENCE: https://developer.mozilla.org/en/docs/Web/API/Node/contains
-      if (!el.contains(ev.target)) {
+      if (initialMacrotaskEnded && !el.contains(ev.target)) {
         return callback(ev);
       }
     };

dist/vue-clickaway.min.js

@@ -1,6 +1,6 @@
 import Vue from 'vue';
 
-export var version = '2.0.0';
+export var version = '2.1.0';
 
 var compatible = (/^2\./).test(Vue.version);
 if (!compatible) {

index.js

@@ -1,7 +1,7 @@
 {
   "name": "vue-clickaway",
   "description": "Reusable clickaway directive for reusable Vue.js components",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "author": "Denis Karabaza <[email protected]>",
   "browserify": {
     "transform": [