feat(uiSelectSingleDirective): add an option to avoid backspace model reset

Currently, when you select an option and you press the backspace key, it will reset the model.
With this option, we could disable this behavior to avoid the model resetting.

Closes angular-ui#926 angular-ui#525

Author: Pierre Gasté

src/common.js

@@ -105,7 +105,8 @@ var uis = angular.module('ui.select', [])
   generateId: function() {
     return latestId++;
   },
-  appendToBody: false
+  appendToBody: false,
+  disableBackspaceReset: false
 })
 
 // See Rename minErr and make it accessible from outside https://github.com/angular/angular.js/issues/6913

src/uiSelectDirective.js

@@ -83,6 +83,11 @@ uis.directive('uiSelect',
             $select.sortable = sortable !== undefined ? sortable : uiSelectConfig.sortable;
         });
 
+        scope.$watch('disableBackspaceReset', function() {
+          var disableBackspaceReset = scope.$eval(attrs.disableBackspaceReset);
+          $select.disableBackspaceReset = disableBackspaceReset !== undefined ? disableBackspaceReset : uiSelectConfig.disableBackspaceReset;
+        });
+
         attrs.$observe('limit', function() {
           //Limit the number of selections allowed
           $select.limit = (angular.isDefined(attrs.limit)) ? parseInt(attrs.limit, 10) : undefined;

src/uiSelectSingleDirective.js

@@ -85,7 +85,7 @@ uis.directive('uiSelectSingle', ['$timeout','$compile', function($timeout, $comp
       });
       focusser.bind("keydown", function(e){
 
-        if (e.which === KEY.BACKSPACE) {
+        if (e.which === KEY.BACKSPACE && $select.disableBackspaceReset === false) {
           e.preventDefault();
           e.stopPropagation();
           $select.select(undefined);

test/select.spec.js

@@ -159,6 +159,7 @@ describe('ui-select tests', function() {
       if (attrs.allowClear !== undefined) { matchAttrsHtml += ' allow-clear="' + attrs.allowClear + '"';}
       if (attrs.inputId !== undefined) { attrsHtml += ' input-id="' + attrs.inputId + '"'; }
       if (attrs.ngClass !== undefined) { attrsHtml += ' ng-class="' + attrs.ngClass + '"'; }
+      if (attrs.disableBackspaceReset !== undefined) { attrsHtml += ' disable-backspace-reset="' + attrs.disableBackspaceReset + '"';}
     }
 
     return compileTemplate(
@@ -800,6 +801,26 @@ describe('ui-select tests', function() {
     expect(getMatchLabel(el)).toEqual('-- None Selected --');
   });
 
+  describe('disable backspace reset option', function(){
+    it('should undefined model when pressing BACKSPACE key if disableBackspaceReset=false', function() {
+      var el = createUiSelect();
+      var focusserInput = el.find('.ui-select-focusser');
+
+      clickItem(el, 'Samantha');
+      triggerKeydown(focusserInput, Key.Backspace);
+      expect(scope.selection.selected).toBeUndefined();
+    });
+
+    it('should NOT reset model when pressing BACKSPACE key if disableBackspaceReset=true', function() {
+      var el = createUiSelect({disableBackspaceReset: true});
+      var focusserInput = el.find('.ui-select-focusser');
+
+      clickItem(el, 'Samantha');
+      triggerKeydown(focusserInput, Key.Backspace);
+      expect(scope.selection.selected).toBe(scope.people[5]);
+    });
+  });
+
   describe('disabled options', function() {
     function createUiSelect(attrs) {
       var attrsDisabled = '';