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

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 = '\