feat(uiSelectSingle): add option to avoid backspace resetting the model

Adds `backspace-reset` attribute (default: `true`).

Currently, when you select an option and you press the backspace key, it will reset the model.

Setting `backspace-reset="false"` will disable this behavior and so avoid resetting the model.

Closes angular-ui#926 angular-ui#525

Author: pierregaste

src/common.js

@@ -108,7 +108,8 @@ var uis = angular.module('ui.select', [])
   },
   appendToBody: false,
   spinnerEnabled: false,
-  spinnerClass: 'glyphicon-refresh ui-select-spin'
+  spinnerClass: 'glyphicon-refresh ui-select-spin',
+  backspaceReset: true
 })
 
 // See Rename minErr and make it accessible from outside https://github.com/angular/angular.js/issues/6913

src/uiSelectDirective.js

@@ -83,6 +83,12 @@ uis.directive('uiSelect',
             $select.sortable = sortable !== undefined ? sortable : uiSelectConfig.sortable;
         });
 
+        attrs.$observe('backspaceReset', function() {
+          // $eval() is needed otherwise we get a string instead of a boolean
+          var backspaceReset = scope.$eval(attrs.backspaceReset);
+          $select.backspaceReset = backspaceReset !== undefined ? backspaceReset : true;
+        });
+
         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.backspaceReset !== false) {
           e.preventDefault();
           e.stopPropagation();
           $select.select(undefined);

test/select.spec.js

@@ -167,6 +167,7 @@ describe('ui-select tests', function() {
       if (attrs.spinnerClass !== undefined) { attrsHtml += ' spinner-class="' + attrs.spinnerClass + '"'; }
       if (attrs.refresh !== undefined) { choicesAttrsHtml += ' refresh="' + attrs.refresh + '"'; }
       if (attrs.refreshDelay !== undefined) { choicesAttrsHtml += ' refresh-delay="' + attrs.refreshDelay + '"'; }
+      if (attrs.backspaceReset !== undefined) { attrsHtml += ' backspace-reset="' + attrs.backspaceReset + '"';}
     }
 
     return compileTemplate(
@@ -808,6 +809,26 @@ describe('ui-select tests', function() {
     expect(getMatchLabel(el)).toEqual('-- None Selected --');
   });
 
+  describe('backspace reset option', function(){
+    it('should undefined model when pressing BACKSPACE key if backspaceReset=true', 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 backspaceReset=false', function() {
+      var el = createUiSelect({backspaceReset: false});
+      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 = '';