Add support for onFocus and onBlur component binding callbacks (#54)

Author: josephschmitt

README.md

@@ -218,6 +218,14 @@ behavior of the omnibox:
 The following &-callback functions are available for binding on the `ngc-omnibox` component in
 response to events:
 
+- `onFocus({event})`: An expression that's called when the component gets focus. This includes not
+just the input field, but the component in general. This is necessary since selecting the choices
+might blur the input field, but not the component itself. If you need to know when just the input
+field receives focus, you can use the `target` property of the event object to figure it out.
+- `onBlur({event})`: An expression that's called when the component loses focus. This also includes
+the entire component, not just the field. This blur event also has logic to reduce the noise that
+sometimes happens where it'll lose focus then immediately regain it, so the blur is called only
+after a timeout to make sure it doesn't re-receive focus first.
 - `onChosen({choice})`: An expression that's called when a suggestion is chosen. In its locals it
 has access to `choice`, which is the item that was chosen.
 - `onUnchosen({choice})`: An expression that's called when a suggestion is unchosen (removed as a

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngc-omnibox",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "A modern, flexible, Angular 1.x autocomplete library with limited assumptions.",
   "main": "dist/ngc-omnibox.js",
   "scripts": {

src/angularComponent/ngcOmniboxComponent.js

@@ -61,6 +61,8 @@ export default {
     isSelectable: '&',
     canShowSuggestions: '&',
     requireMatch: '<?',
+    onFocus: '&',
+    onBlur: '&',
     onChosen: '&',
     onUnchosen: '&',
     onShowSuggestions: '&',

src/angularComponent/ngcOmniboxController.js

@@ -43,18 +43,21 @@ export default class NgcOmniboxController {
       $scope.$apply();
     });
 
-    if (this.hideOnBlur !== 'false') {
-      let blurTimeout;
-      this.element.addEventListener('focus', () => {
-        clearTimeout(blurTimeout);
-      }, true);
-      this.element.addEventListener('blur', () => {
-        blurTimeout = setTimeout(() => {
+    let blurTimeout;
+    this.element.addEventListener('focus', (event) => {
+      clearTimeout(blurTimeout);
+      this.onFocus({event});
+    }, true);
+    this.element.addEventListener('blur', (event) => {
+      blurTimeout = setTimeout(() => {
+        if (this.hideOnBlur !== 'false') {
           this.hideSuggestions = true;
           $scope.$apply();
-        }, SUGGESTIONS_BLUR_THRESHOLD);
-      }, true);
-    }
+        }
+
+        this.onBlur({event});
+      }, SUGGESTIONS_BLUR_THRESHOLD);
+    }, true);
 
     // Remove the focus ring when the overall component is focused
     const styleSheets = this.doc.styleSheets;