Fix "origin" click triggering the away callback

Author: simplesmiler

index.js

@@ -12,6 +12,22 @@ export var directive = {
   acceptStatement: true,
   priority: 700,
 
+  bind: function() {
+    var self = this;
+
+    // @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
+    self.initialMacrotaskEnded = false;
+    setTimeout(function() {
+      self.initialMacrotaskEnded = true;
+    });
+  },
+
   update: function(handler) {
     if (typeof handler !== 'function') {
       if (process.env.NODE_ENV !== 'production') {
@@ -26,13 +42,14 @@ export var directive = {
 
     this.reset();
 
+    var self = this;
     var el = this.el;
     var scope = this._scope || this.vm;
 
     this.handler = function(ev) {
       // @NOTE: IE 5.0+
       // @REFERENCE: https://developer.mozilla.org/en/docs/Web/API/Node/contains
-      if (!el.contains(ev.target)) {
+      if (self.initialMacrotaskEnded && !el.contains(ev.target)) {
         scope.$event = ev;
         var res = handler(ev);
         scope.$event = null;