fix(chips): detect cursor position for selecting previous chip.

* Currently we check the truthyness of the chipBuffer, to confirm that the user is at the beginning of the chip input.
  Once he is at the beginning, we select and focus the previous chip, so the user can keep deleting the chips.

* Checking for truthyness is not working, because Angular is trimming all ngModel values for the autocomplete and default chip input.
  This caused issues, where users can't delete their spaces in the input anymore.

Checking the cursor position is more appropriated here, and works without affecting the autocomplete.
This allows the autocomplete to work independently without any changes with the `md-chips` component.

Fixes #8750

Closes #8791

Author: devversion

src/components/chips/chips.spec.js

@@ -355,15 +355,18 @@ describe('<md-chips>', function() {
           expect(scope.items).toEqual(['Apple', 'Banana', 'Orange', 'Test']);
         }));
 
-        it('should not trim the input text of the input', inject(function($mdConstant) {
+        it('should properly cancel the backspace event to select the chip before', inject(function($mdConstant) {
           var element = buildChips(BASIC_CHIP_TEMPLATE);
           var ctrl = element.controller('mdChips');
           var input = element.find('input');
 
           input.val('    ');
           input.triggerHandler('input');
 
-          expect(ctrl.chipBuffer).toBeTruthy();
+          // Since the `md-chips` component is testing the backspace select previous chip functionality by
+          // checking the current caret / cursor position, we have to set the cursor to the end of the current
+          // value.
+          input[0].selectionStart = input[0].selectionEnd = input[0].value.length;
 
           var enterEvent = {
             type: 'keydown',
@@ -379,6 +382,11 @@ describe('<md-chips>', function() {
           input.val('');
           input.triggerHandler('input');
 
+          // Since the `md-chips` component is testing the backspace select previous chip functionality by
+          // checking the current caret / cursor position, we have to set the cursor to the end of the current
+          // value.
+          input[0].selectionStart = input[0].selectionEnd = input[0].value.length;
+
           input.triggerHandler(enterEvent);
 
           expect(enterEvent.preventDefault).toHaveBeenCalledTimes(1);
@@ -690,6 +698,56 @@ describe('<md-chips>', function() {
           expect(element.find('input').val()).toBe('');
         }));
 
+        it('should properly cancel the backspace event to select the chip before', inject(function($mdConstant) {
+          setupScopeForAutocomplete();
+          var element = buildChips(AUTOCOMPLETE_CHIPS_TEMPLATE);
+
+          // The embedded `md-autocomplete` needs a timeout flush for it's initialization.
+          $timeout.flush();
+          $timeout.flush();
+          scope.$apply();
+
+          var input = angular.element(element[0].querySelector('md-autocomplete input'));
+
+
+          input.val('    ');
+          input.triggerHandler('input');
+
+          expect(input.controller('ngModel').$modelValue).toBe('');
+          // Since the `md-chips` component is testing the backspace select previous chip functionality by
+          // checking the current caret / cursor position, we have to set the cursor to the end of the current
+          // value.
+          input[0].selectionStart = input[0].selectionEnd = input[0].value.length;
+
+          var backspaceEvent = {
+            type: 'keydown',
+            keyCode: $mdConstant.KEY_CODE.BACKSPACE,
+            which: $mdConstant.KEY_CODE.BACKSPACE,
+            preventDefault: jasmine.createSpy('preventDefault')
+          };
+
+          input.triggerHandler(backspaceEvent);
+
+          // We have to trigger a digest, because the event listeners for the chips component will be called
+          // with an async digest evaluation.
+          scope.$digest();
+
+          expect(backspaceEvent.preventDefault).not.toHaveBeenCalled();
+
+          input.val('');
+          input.triggerHandler('input');
+
+          // Since the `md-chips` component is testing the backspace select previous chip functionality by
+          // checking the current caret / cursor position, we have to set the cursor to the end of the current
+          // value.
+          input[0].selectionStart = input[0].selectionEnd = input[0].value.length;
+
+          input.triggerHandler(backspaceEvent);
+          scope.$digest();
+
+          expect(backspaceEvent.preventDefault).toHaveBeenCalledTimes(1);
+        }));
+
         it('simultaneously allows selecting an existing chip AND adding a new one', inject(function($mdConstant) {
           // Setup our scope and function
           setupScopeForAutocomplete();

src/components/chips/js/chipsController.js

@@ -114,10 +114,19 @@ MdChipsCtrl.prototype.inputKeydown = function(event) {
   }
 
   if (event.keyCode === this.$mdConstant.KEY_CODE.BACKSPACE) {
-    if (chipBuffer) return;
+    // Only select and focus the previous chip, if the current caret position of the
+    // input element is at the beginning.
+    if (getCursorPosition(event.target) !== 0) {
+      return;
+    }
+
     event.preventDefault();
     event.stopPropagation();
-    if (this.items.length) this.selectAndFocusChipSafe(this.items.length - 1);
+
+    if (this.items.length) {
+      this.selectAndFocusChipSafe(this.items.length - 1);
+    }
+
     return;
   }
 
@@ -139,6 +148,19 @@ MdChipsCtrl.prototype.inputKeydown = function(event) {
   }
 };
 
+/**
+ * Returns the cursor position of the specified input element.
+ * If no selection is present it returns -1.
+ * @param element HTMLInputElement
+ * @returns {Number} Cursor Position of the input.
+ */
+function getCursorPosition(element) {
+  if (element.selectionStart === element.selectionEnd) {
+    return element.selectionStart;
+  }
+  return -1;
+}
+
 
 /**
  * Updates the content of the chip at given index

src/components/chips/js/chipsDirective.js

@@ -175,7 +175,6 @@
             ng-model="$mdChipsCtrl.chipBuffer"\
             ng-focus="$mdChipsCtrl.onInputFocus()"\
             ng-blur="$mdChipsCtrl.onInputBlur()"\
-            ng-trim="false"\
             ng-keydown="$mdChipsCtrl.inputKeydown($event)">';
 
   var CHIP_DEFAULT_TEMPLATE = '\