Add hideOnChosen option (#71)

The hideOnChosen option is handy when users want to be able to choose multiple suggestions at once, such as when the suggestions template is a checkbox list.

Author: kbejnar

README.md

@@ -184,6 +184,8 @@ you need to support a "free-text" suggestion with multiple on, be sure to add it
 function as a suggestion.
 - `hideOnBlur {Boolean}`: Whether the list of suggestions should automatically hide when the
 component itself loses focus. Hitting ESC will always close the list of suggestions.
+- `hideOnChosen {Boolean}`: Whether the list of suggestions should automatically hide when the
+user chooses a suggestion. Defaults to true.
 - `isSelectable({suggestion, omnibox}) {Boolean}`: An expression that should evaluate to a Boolean
 that determines if a suggestion is able to be interacted with. This expression will be executed
 whenever a suggestion is attempted to be highlighted either by the keyboard or mouse. In its locals

src/angularComponent/ngcOmniboxComponent.js

@@ -25,6 +25,8 @@ import NgcOmniboxController from './ngcOmniboxController.js';
  *     controls whether the `ngModel` will be an array (multiple is on) or a single choice (off).
  * - `hideOnBlur {Boolean}`: Whether the list of suggestions should automatically hide when the
  *       component itself loses focus. Hitting ESC will always close the list of suggestions.
+ * - `hideOnChosen {Boolean}`: Whether the list of suggestions should automatically hide when the
+ *       user chooses a suggestion. Defaults to true.
  * - `isSelectable({suggestion}) {Boolean}`: An expression that should evaluate to a Boolean that
  *       determines if a suggestion is able to be interacted with. This expression will be executed
  *       whenever a suggestion is attempted to be highlighted either by the keyboard or mouse. It
@@ -58,6 +60,7 @@ export default {
     ngDisabled: '&',
     multiple: '<?',
     hideOnBlur: '@',
+    hideOnChosen: '<?',
     isSelectable: '&',
     canShowSuggestions: '&',
     requireMatch: '<?',

src/angularComponent/ngcOmniboxController.js

@@ -51,6 +51,9 @@ export default class NgcOmniboxController {
     this.element.addEventListener('blur', (event) => {
       blurTimeout = setTimeout(() => {
         if (this.hideOnBlur !== 'false') {
+          if (this.requireMatch && this.hideOnChosen === false) {
+            this.query = '';
+          }
           this.hideSuggestions = true;
           this.highlightedChoice = null;
           $scope.$apply();
@@ -413,9 +416,11 @@ export default class NgcOmniboxController {
       this.onChosen({choice: item, $event, omnibox: this});
       !$event.isDefaultPrevented && $event.performDefault();
 
-      this.query = '';
       shouldFocusField && this.focus();
-      this.hideSuggestions = true;
+      if (this.hideOnChosen !== false) {
+        this.query = '';
+        this.hideSuggestions = true;
+      }
     }
   }