Custom component now needs to emit vf:addFocusListeners to have focus…

…in focusout listeners applied

dist/vue-form.js

@@ -1172,12 +1172,15 @@ var vueFormValidator = {
       vm.$on('focus', function () {
         fieldstate._setFocused(true);
       });
-      el.addEventListener('focusout', function () {
-        fieldstate._setFocused(false);
-      }, false);
-      el.addEventListener('focusin', function () {
-        fieldstate._setFocused(true);
-      }, false);
+
+      vm.$once('vf:addFocusListeners', function () {
+        el.addEventListener('focusout', function () {
+          fieldstate._setFocused(false);
+        }, false);
+        el.addEventListener('focusin', function () {
+          fieldstate._setFocused(true);
+        }, false);
+      });
 
       vm.$on('vf:validate', function (data) {
         if (!vm._vfValidationData_) {

example/component.html

@@ -110,7 +110,7 @@
     };
 
     var dynamicField = {
-      template: '<div><input v-if="isNumber" class="form-control" type="number" :min="field.min" :max="field.max" v-model="input" /></div>',
+      template: '<div><input ref="input" v-if="isNumber" class="form-control" type="number" :min="field.min" :max="field.max" v-model="input" /></div>',
       props: {
         field: Object,
         value: null
@@ -145,6 +145,18 @@
         this.input = this.value;
       },
       mounted: function () {
+        var vm = this;
+
+        this.$refs.input.addEventListener('focus', function() {
+          vm.$emit('focus');
+        }, false);
+        this.$refs.input.addEventListener('blur', function() {
+          vm.$emit('blur');
+        }, false);
+
+        // or listen for bubbled focusin / focusout events
+        //this.$emit('vf:addFocusListener');
+
         // watch a local data property / computed
         // which holds validation data / attributes
         this.$watch('validationData', function (v) {
@@ -193,4 +205,4 @@
 
 </body>
 
-</html>
+</html>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-form",
-  "version": "4.8.1",
+  "version": "4.9.0",
   "description": "Form validation for Vue.js",
   "main": "dist/vue-form.js",
   "scripts": {

src/directives/vue-form-validator.js

@@ -99,12 +99,15 @@ export default {
       vm.$on('focus', () => {
         fieldstate._setFocused(true);
       });
-      el.addEventListener('focusout', () => {
-        fieldstate._setFocused(false);
-      }, false);
-      el.addEventListener('focusin', () => {
-        fieldstate._setFocused(true);
-      }, false);
+
+      vm.$once('vf:addFocusListeners', () => {
+        el.addEventListener('focusout', () => {
+          fieldstate._setFocused(false);
+        }, false);
+        el.addEventListener('focusin', () => {
+          fieldstate._setFocused(true);
+        }, false);
+      });
 
       vm.$on('vf:validate', data => {
         if(!vm._vfValidationData_) {