Merge branch 'release/1.2.1'

Author: Bart van den Ende

README.md

@@ -50,7 +50,8 @@ Use data properties with a domId string reference to determine the focus action
 ```
 
 ### JS Component binding
-Use vue bind directive with a component function reference to determine the focus action during navigation
+Use vue bind directive with a component function reference to determine the focus action during navigation. 
+Note that the available Vue events (@down, @up, @right, @left, @click) only work on Vue components not on native html elements!
 ```html
 <Component id="button1" v-focus @down="componentFunctionDown"></Component>
 <Component id="button2" v-focus @up="componentFunctionUp" ></Component>
@@ -88,6 +89,7 @@ In case the page is just rendered and or focus is reset the directive should kno
 
 ### Enter action
 When a user actions an 'enter' keypress it will automatically be converted into a click action on the element that has active focus. So you can use the regular vue @click bindings.
+Note that by default vue only supports @click on html elements and you have to normally use @click.native on a component, this directive will automatically capture the native event though and convert it into a vue event so you can use @click for both native keyboard and mouse clicks.
 ```html
 <Component id="button1" v-focus @down="componentFunctionDown"></Component>
 <Component id="button2" v-focus @up="componentFunctionUp" @click="button2clicked"></Component>

package.json

@@ -35,7 +35,8 @@
     "unit": "jest --config test/unit/jest.conf.js --coverage",
     "release": "release-it --github.release --npm.publish --non-interactive",
     "release-minor": "release-it --github.release --npm.publish --non-interactive --increment minor",
-    "release-major": "release-it --github.release --npm.publish --non-interactive --increment major"
+    "release-major": "release-it --github.release --npm.publish --non-interactive --increment major",
+    "release-patch": "release-it --github.release --npm.publish --non-interactive --increment patch"
   },
   "devDependencies": {
     "gulp": "^3.9.1",

src/navigation.service.ts

@@ -50,8 +50,6 @@ export class NavigationService {
 
       // action spatial navigation
       if (keyName in NavigationServiceDirection) this.spatialNavigationAction(<NavigationServiceDirection>keyName);
-
-      return true;
     }));
   }
 
@@ -62,8 +60,6 @@ export class NavigationService {
 
       let el = this.findFocusable(<HTMLElement>e.target);
       if (el) el.focus();
-
-      return false;
     });
 
     // enable mouseout event
@@ -72,14 +68,20 @@ export class NavigationService {
 
       let el = this.findFocusable(<HTMLElement>e.target);
       if (el) el.blur();
+    });
 
-      return false;
+
+    // enable click event
+    document.addEventListener("click", (e: MouseEvent) => {
+      if (this.blockAllSpatialNavigation) return false;
+      let el = this.findFocusable(<HTMLElement> e.target);
+      if (el) el.enter();
     });
 
   }
 
   // try to find focusable element on mouse hover or click
-  private findFocusable(target: Element): FocusElement | undefined {
+  findFocusable(target: Element): FocusElement | undefined {
     // inside loop search for focusable element
     // we need this if the focusable element has children inside
     // so e.target can point to child or grandchild of focusable element
@@ -95,7 +97,7 @@ export class NavigationService {
   }
 
   // action a new spatial navigation action
-  private spatialNavigationAction(action: NavigationServiceDirection) {
+  spatialNavigationAction(action: NavigationServiceDirection) {
     let el = this.getFocusElementInFocus();
 
     let keyValue = NavigationServiceDirection[action];