✨ Add option for not trimming input value

Lukasz Kokot · Lukasz Kokot · commit 56138c4e2ab8 · 2020-01-17T08:12:40.000-05:00
We add a "trim" option that is by default set to "true", in order for the
component to stay backward compatible. However, when this property is set
to "false", the value is the one directly entered by the user, with all
whitespaces left untouched.
diff --git a/dist/select.css b/dist/select.css
@@ -1,7 +1,7 @@
 /*!
  * ui-select
  * http://github.com/angular-ui/ui-select
- * Version: 0.19.8 - 2017-12-20T18:40:38.492Z
+ * Version: 0.19.8 - 2020-01-17T13:11:27.917Z
  * License: MIT
  */
 
diff --git a/dist/select.js b/dist/select.js
diff --git a/dist/select.min.css b/dist/select.min.css
diff --git a/dist/select.min.js b/dist/select.min.js
diff --git a/dist/select.min.js.map b/dist/select.min.js.map
diff --git a/src/bootstrap/select-multiple.tpl.html b/src/bootstrap/select-multiple.tpl.html
@@ -15,6 +15,7 @@
            aria-expanded="{{$select.open}}"
            aria-label="{{$select.baseTitle}}"
            ng-class="{'spinner': $select.refreshing}"
+           ng-trim="{{ $select.trim }}"
            ondrop="return false;">
     <input type="text"
            tabindex="-1"
diff --git a/src/bootstrap/select.tpl.html b/src/bootstrap/select.tpl.html
@@ -9,7 +9,8 @@
          ng-class="{ 'ui-select-search-hidden' : !$select.searchEnabled }"
          placeholder="{{$select.placeholder}}"
          ng-model="$select.search"
-         ng-show="$select.open">
+         ng-show="$select.open"
+         ng-trim="{{ $select.trim }}">
   <div class="ui-select-choices"></div>
   <div class="ui-select-no-choice"></div>
 </div>
diff --git a/src/common.js b/src/common.js
@@ -131,7 +131,8 @@ var uis = angular.module('ui.select', [])
   appendDropdownToBody: false,
   spinnerEnabled: false,
   spinnerClass: 'glyphicon glyphicon-refresh ui-select-spin',
-  backspaceReset: true
+  backspaceReset: true,
+  trim: true
 })
 
 // See Rename minErr and make it accessible from outside https://github.com/angular/angular.js/issues/6913
diff --git a/src/select2/select-multiple.tpl.html b/src/select2/select-multiple.tpl.html
@@ -21,6 +21,7 @@
         ng-hide="$select.disabled"
         ng-model="$select.search"
         ng-click="$select.activate()"
+        ng-trim="{{ $select.trim }}"
         style="width: 34px;"
         ondrop="return false;">
       <input type="text" tabindex="-1"
diff --git a/src/select2/select.tpl.html b/src/select2/select.tpl.html
@@ -10,6 +10,7 @@
       <input type="search" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
        ng-class="{'select2-active': $select.refreshing}"
        role="combobox"
+       ng-trim="{{ $select.trim }}"
        aria-expanded="true"
        aria-owns="ui-select-choices-{{ $select.generatedId }}"
        aria-label="{{ $select.baseTitle }}"
diff --git a/src/selectize/select-multiple.tpl.html b/src/selectize/select-multiple.tpl.html
@@ -11,10 +11,11 @@
            ng-disabled="$select.disabled"
            aria-expanded="{{$select.open}}"
            aria-label="{{ $select.baseTitle }}"
+           ng-trim="{{ $select.trim }}"
            ondrop="return false;">
     <input type="text" tabindex="-1"
            class="ui-select-copy-input ui-select-offscreen">
   </div>
   <div class="ui-select-choices"></div>
   <div class="ui-select-no-choice"></div>
-</div>
+</div>
diff --git a/src/selectize/select.tpl.html b/src/selectize/select.tpl.html
@@ -11,6 +11,7 @@
            ng-model="$select.search"
            ng-hide="!$select.isEmpty() && !$select.open"
            ng-disabled="$select.disabled"
+           ng-trim="{{ $select.trim }}"
            aria-label="{{ $select.baseTitle }}">
   </div>
   <div class="ui-select-choices"></div>
diff --git a/src/uiSelectController.js b/src/uiSelectController.js
@@ -633,10 +633,14 @@ uis.controller('uiSelectCtrl',
       // and remove tagging token if it's the last character in string
       var chunks = search.split(ctrl.taggingTokenEscape + token);
       chunks.push(chunks.pop().replace(tokenRegex, ''));
-      search = chunks.join(token).trim();
+      search = chunks.join(token);
     } else {
       // remove tagging token if it's the last character
-      search = search.replace(tokenRegex, '').trim();
+      search = search.replace(tokenRegex, '');
+    }
+
+    if ( !!$scope.$select.trim ) {
+      search = search.trim();
     }
     return search;
   }
diff --git a/src/uiSelectDirective.js b/src/uiSelectDirective.js
@@ -181,6 +181,10 @@ uis.directive('uiSelect',
           $select.appendDropdownToBody = appendDropdownToBody !== undefined ? appendDropdownToBody : uiSelectConfig.appendDropdownToBody;
         });
 
+        scope.$watch(function () { return scope.$eval(attrs.trim); }, function(newVal) {
+          $select.trim = newVal !== undefined ? newVal : uiSelectConfig.trim;
+        });
+
         //Automatically gets focus when loaded
         if (angular.isDefined(attrs.autofocus)){
           $timeout(function(){
diff --git a/test/select.spec.js b/test/select.spec.js
@@ -181,6 +181,7 @@ describe('ui-select tests', function () {
       if (attrs.backspaceReset !== undefined) { attrsHtml += ' backspace-reset="' + attrs.backspaceReset + '"'; }
       if (attrs.uiDisableChoice !== undefined) { choicesAttrsHtml += ' ui-disable-choice="' + attrs.uiDisableChoice + '"'; }
       if (attrs.removeSelected !== undefined) { attrsHtml += ' remove-selected="' + attrs.removeSelected + '"'; }
+      if (attrs.trim !== undefined) { attrsHtml += ' trim="' + attrs.trim + '"'; }
     }
 
     return compileTemplate(
@@ -1139,7 +1140,7 @@ describe('ui-select tests', function () {
       var el = createUiSelect();
       expect(el.find('.ui-select-choices-group .ui-select-choices-group-label').map(function () {
         return this.textContent;
-      }).toArray()).toEqual(["Foo", "Baz", "bar"]);
+      }).toArray()).toEqual(["Foo", "bar", "Baz"]);
     });
   });
 
@@ -3680,6 +3681,54 @@ describe('ui-select tests', function () {
     });
   });
 
+  describe('Test trim', function () {
+    it('should have a default value of true', function () {
+      var control = createUiSelect();
+      expect(control.scope().$select.trim).toEqual(true);
+    });
+
+     it('should have set a value of false', function () {
+      var control = createUiSelect({ trim: false });
+      expect(control.scope().$select.trim).toEqual(false);
+    });
+
+     ['selectize', 'bootstrap', 'select2'].forEach(function (theme) {
+      describe(theme + ' theme', function () {
+        it('should define ng-trim to true when undefined', function () {
+          var el = createUiSelect({ theme});
+          expect($(el).find('.ui-select-search').attr('ng-trim')).toEqual('true');
+        });
+
+         it('should define ng-trim when true', function () {
+          var el = createUiSelect({ theme, trim: true });
+          expect($(el).find('.ui-select-search').attr('ng-trim')).toEqual('true');
+        });
+
+         it('should define ng-trim when false', function () {
+          var el = createUiSelect({ theme, trim: false });
+          expect($(el).find('.ui-select-search').attr('ng-trim')).toEqual('false');
+        });
+
+         describe('multiple', function () {
+          it('should define ng-trim to true when undefined', function () {
+            var el = createUiSelect({ multiple: 'multiple', theme });
+            expect($(el).find('.ui-select-search').attr('ng-trim')).toEqual('true');
+          });
+
+           it('should define ng-trim when true', function () {
+            var el = createUiSelect({ multiple: 'multiple', theme, trim: true });
+            expect($(el).find('.ui-select-search').attr('ng-trim')).toEqual('true');
+          });
+
+           it('should define ng-trim when false', function () {
+            var el = createUiSelect({ multiple: 'multiple', theme, trim: false });
+            expect($(el).find('.ui-select-search').attr('ng-trim')).toEqual('false');
+          });
+        });
+      });
+    });
+  });
+
   describe('With refresh on active', function () {
     it('should refresh when is activated', function () {
       scope.fetchFromServer = function () { };
