Fixes bugs with highlighting a choice when didn't mean to (#39)

There was a weird issue where if you type in a bunch of text in the input field, then select all and hit backspace, it would delete the text, and then highlight a choice. This was because we were only checking that selection start was the same between key down and key up, which it would be if we selected all and deleted.

To combat this, I'm now also checking selection end to make sure it's the same, which would be the case when the text is deleted since the selection will have collapsed.

Additionally, I added using the DELETE key to to navigate when in the field (so it works as the opposite of BACKSPACE), and restricted using DELETE and BACKSPACE to select choices to only when the field is empty.

Author: josephschmitt

package.json

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

src/angularComponent/ngcOmniboxController.js

@@ -446,6 +446,7 @@ export default class NgcOmniboxController {
   _handleKeyDown({keyCode}) {
     if (this.doc.activeElement === this._fieldElement) {
       this.selectionStartKeyDown = this.doc.activeElement.selectionStart;
+      this.selectionEndKeyDown = this.doc.activeElement.selectionEnd;
     }
 
     if (this.shouldShowSuggestions()) {
@@ -480,16 +481,19 @@ export default class NgcOmniboxController {
     if (this.hasChoices) {
       if (this.doc.activeElement === this._fieldElement) {
         this.selectionStartKeyUp = this.doc.activeElement.selectionStart;
+        this.selectionEndKeyUp = this.doc.activeElement.selectionEnd;
 
         // We should now consider navigating out of the input field. We only want to trigger this
         // when we are already at the beginning or end of the field and hit Left or Right *again*.
-        if (this.selectionStartKeyDown === this.selectionStartKeyUp) {
+        if (this.selectionStartKeyDown === this.selectionStartKeyUp && this.selectionEndKeyDown ===
+            this.selectionEndKeyUp) {
           const inputLength = this._fieldElement.value.length;
 
-          if ((keyCode === KEY.LEFT || keyCode === KEY.BACKSPACE) &&
+          if ((keyCode === KEY.LEFT || (keyCode === KEY.BACKSPACE && !this.query)) &&
               this.selectionStartKeyUp === 0) {
             this.highlightLastChoice();
-          } else if (keyCode === KEY.RIGHT && this.selectionStartKeyUp === inputLength) {
+          } else if ((keyCode === KEY.RIGHT || keyCode === KEY.DELETE && !this.query) &&
+              this.selectionStartKeyUp === inputLength) {
             this.highlightFirstChoice();
           }
         }