From c95f2132cc3b2a8c1b9fcda9f27c575227f599bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pierre=20Gast=C3=A9?= Date: Mon, 25 Jul 2016 18:27:31 +0200 Subject: [PATCH 1/5] 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 #926 #525 --- src/common.js | 3 ++- src/uiSelectDirective.js | 5 +++++ src/uiSelectSingleDirective.js | 2 +- test/select.spec.js | 21 +++++++++++++++++++++ 4 files changed, 29 insertions(+), 2 deletions(-) diff --git a/src/common.js b/src/common.js index 45d88acfc..32591369d 100644 --- a/src/common.js +++ b/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 diff --git a/src/uiSelectDirective.js b/src/uiSelectDirective.js index cded3d463..f48439c92 100644 --- a/src/uiSelectDirective.js +++ b/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; diff --git a/src/uiSelectSingleDirective.js b/src/uiSelectSingleDirective.js index 73abedd23..9b3905dae 100644 --- a/src/uiSelectSingleDirective.js +++ b/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); diff --git a/test/select.spec.js b/test/select.spec.js index 5f8f31de6..f227bfaf6 100644 --- a/test/select.spec.js +++ b/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 = ''; From 56124532e130354d444365d124b92e2b280f483f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pierre=20Gast=C3=A9?= Date: Tue, 20 Sep 2016 16:10:03 +0200 Subject: [PATCH 2/5] $watch property instead of "disableBackspaceReset" string. --- src/uiSelectDirective.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/uiSelectDirective.js b/src/uiSelectDirective.js index f48439c92..611bf1ef8 100644 --- a/src/uiSelectDirective.js +++ b/src/uiSelectDirective.js @@ -83,9 +83,8 @@ 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; + scope.$watch(function () { return scope.$eval(attrs.disableBackspaceReset); }, function(newVal) { + $select.disableBackspaceReset = newVal !== undefined ? newVal : uiSelectConfig.disableBackspaceReset; }); attrs.$observe('limit', function() { From 2b4121ef33f301d9569ccce487547de3fa1ec7e9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pierre=20Gast=C3=A9?= Date: Fri, 28 Oct 2016 16:13:26 +0200 Subject: [PATCH 3/5] Replace disableBackspaceReset by backspaceReset option. --- src/common.js | 2 +- src/uiSelectDirective.js | 4 ++-- src/uiSelectSingleDirective.js | 2 +- test/select.spec.js | 10 +++++----- 4 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/common.js b/src/common.js index 9180b3884..ba7023424 100644 --- a/src/common.js +++ b/src/common.js @@ -109,7 +109,7 @@ var uis = angular.module('ui.select', []) appendToBody: false, spinnerEnabled: false, spinnerClass: 'glyphicon-refresh ui-select-spin', - disableBackspaceReset: false + backspaceReset: true }) // See Rename minErr and make it accessible from outside https://github.com/angular/angular.js/issues/6913 diff --git a/src/uiSelectDirective.js b/src/uiSelectDirective.js index c17a828aa..a4f91b48d 100644 --- a/src/uiSelectDirective.js +++ b/src/uiSelectDirective.js @@ -83,8 +83,8 @@ uis.directive('uiSelect', $select.sortable = sortable !== undefined ? sortable : uiSelectConfig.sortable; }); - scope.$watch(function () { return scope.$eval(attrs.disableBackspaceReset); }, function(newVal) { - $select.disableBackspaceReset = newVal !== undefined ? newVal : uiSelectConfig.disableBackspaceReset; + scope.$watch(function () { return scope.$eval(attrs.backspaceReset); }, function(newVal) { + $select.backspaceReset = newVal !== undefined ? newVal : uiSelectConfig.backspaceReset; }); attrs.$observe('limit', function() { diff --git a/src/uiSelectSingleDirective.js b/src/uiSelectSingleDirective.js index 9b3905dae..5c5776697 100644 --- a/src/uiSelectSingleDirective.js +++ b/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 && $select.disableBackspaceReset === false) { + if (e.which === KEY.BACKSPACE && $select.backspaceReset === true) { e.preventDefault(); e.stopPropagation(); $select.select(undefined); diff --git a/test/select.spec.js b/test/select.spec.js index a4318ecf5..ef6777ba5 100644 --- a/test/select.spec.js +++ b/test/select.spec.js @@ -167,7 +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.disableBackspaceReset !== undefined) { attrsHtml += ' disable-backspace-reset="' + attrs.disableBackspaceReset + '"';} + if (attrs.backspaceReset !== undefined) { attrsHtml += ' backspace-reset="' + attrs.backspaceReset + '"';} } return compileTemplate( @@ -809,8 +809,8 @@ 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() { + 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'); @@ -819,8 +819,8 @@ describe('ui-select tests', function() { expect(scope.selection.selected).toBeUndefined(); }); - it('should NOT reset model when pressing BACKSPACE key if disableBackspaceReset=true', function() { - var el = createUiSelect({disableBackspaceReset: true}); + 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'); From 407546227b08d6d50336a13d6109f8018c08dda2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pierre=20Gast=C3=A9?= Date: Fri, 28 Oct 2016 16:13:53 +0200 Subject: [PATCH 4/5] Revert reformatting in test spec. --- test/select.spec.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/test/select.spec.js b/test/select.spec.js index ef6777ba5..0ae18d92e 100644 --- a/test/select.spec.js +++ b/test/select.spec.js @@ -3060,7 +3060,7 @@ describe('ui-select tests', function() { describe('Test Spinner for promises',function(){ var deferred; - + function getFromServer(){ deferred = $q.defer(); return deferred.promise; @@ -3083,14 +3083,14 @@ describe('ui-select tests', function() { it('should have set a custom class value of randomclass', function () { var control = createUiSelect({spinnerClass: 'randomclass'}); expect(control.scope().$select.spinnerClass).toEqual('randomclass'); - }); + }); it('should not display spinner when disabled', function() { scope.getFromServer = getFromServer; var el = createUiSelect({theme: 'bootstrap', refresh:"getFromServer($select.search)", refreshDelay:0}); openDropdown(el); var spinner = el.find('.ui-select-refreshing'); - expect(spinner.hasClass('ng-hide')).toBe(true); + expect(spinner.hasClass('ng-hide')).toBe(true); setSearchText(el, 'a'); expect(spinner.hasClass('ng-hide')).toBe(true); deferred.resolve(); @@ -3103,7 +3103,7 @@ describe('ui-select tests', function() { var el = createUiSelect({spinnerEnabled: true,theme: 'bootstrap', refresh:"getFromServer($select.search)", refreshDelay:0}); openDropdown(el); var spinner = el.find('.ui-select-refreshing'); - expect(spinner.hasClass('ng-hide')).toBe(true); + expect(spinner.hasClass('ng-hide')).toBe(true); setSearchText(el, 'a'); expect(spinner.hasClass('ng-hide')).toBe(false); deferred.resolve(); From 649fc592faf353f3853ed2c6f032c39dded99a3b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pierre=20Gast=C3=A9?= Date: Fri, 28 Oct 2016 17:03:59 +0200 Subject: [PATCH 5/5] Use $observe instead of $watch fo the backspaceReset attribute. --- src/uiSelectDirective.js | 6 ++++-- src/uiSelectSingleDirective.js | 2 +- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/uiSelectDirective.js b/src/uiSelectDirective.js index a4f91b48d..285cfb4ac 100644 --- a/src/uiSelectDirective.js +++ b/src/uiSelectDirective.js @@ -83,8 +83,10 @@ uis.directive('uiSelect', $select.sortable = sortable !== undefined ? sortable : uiSelectConfig.sortable; }); - scope.$watch(function () { return scope.$eval(attrs.backspaceReset); }, function(newVal) { - $select.backspaceReset = newVal !== undefined ? newVal : uiSelectConfig.backspaceReset; + 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() { diff --git a/src/uiSelectSingleDirective.js b/src/uiSelectSingleDirective.js index 5c5776697..3b9448045 100644 --- a/src/uiSelectSingleDirective.js +++ b/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 && $select.backspaceReset === true) { + if (e.which === KEY.BACKSPACE && $select.backspaceReset !== false) { e.preventDefault(); e.stopPropagation(); $select.select(undefined);