Update to support comma and space on mobile keyboards

Author: phazei

src/tags-input.js

@@ -113,6 +113,8 @@ export default function TagsInputDirective($timeout, $document, $window, $q, tag
         self.clearSelection();
         events.trigger('tag-removed', { $tag: tag });
         return tag;
+      }).catch(() => {
+        //can't remove tag
       });
     };
 
@@ -314,6 +316,9 @@ export default function TagsInputDirective($timeout, $document, $window, $q, tag
 
       scope.eventHandlers = {
         input: {
+          textInput: function($event) {
+              events.trigger('text-input', $event);
+          },
           keydown($event) {
             events.trigger('input-keydown', $event);
           },
@@ -399,6 +404,24 @@ export default function TagsInputDirective($timeout, $document, $window, $q, tag
           element.triggerHandler('blur');
           setElementValidity();
         })
+        .on('text-input', function(event) {
+          // on mobile keydown doesn't provide keyCodes for space or comma (most keys really),
+          // this will translate it so proper handling is triggered if those are pressed
+
+          let originalKey = event.originalEvent.data;
+          let keyCode = null;
+
+          if (originalKey === " ") {
+            keyCode = tiConstants.KEYS.space;
+          } else if (originalKey === ",") {
+            keyCode = tiConstants.KEYS.comma;
+          }
+
+          if (keyCode) {
+            event.keyCode = keyCode;
+            events.trigger('input-keydown', event);
+          }
+        })
         .on('input-keydown', event => {
           let key = event.keyCode;
 

templates/tags-input.html

@@ -13,6 +13,7 @@
            ng-model="newTag.text"
            ng-model-options="{getterSetter: true}"
            ng-keydown="eventHandlers.input.keydown($event)"
+           ng-on-text_input="eventHandlers.input.textInput($event)"
            ng-focus="eventHandlers.input.focus($event)"
            ng-blur="eventHandlers.input.blur($event)"
            ng-paste="eventHandlers.input.paste($event)"
@@ -22,4 +23,4 @@
            ti-bind-attrs="{type: options.type, placeholder: options.placeholder, tabindex: options.tabindex, spellcheck: options.spellcheck}"
            ti-autosize>
   </div>
-</div>
+</div>

test/tags-input.spec.js

@@ -87,6 +87,13 @@ describe('tags-input directive', () => {
     return event;
   }
 
+  function sendTextInput(data, properties) {
+    let event = jQuery.Event('textInput', angular.extend( { originalEvent: {data: data} }, properties || {}));
+    getInput().trigger(event);
+
+    return event;
+  }
+
   function sendBackspace() {
     let event = sendKeyDown(constants.KEYS.backspace);
 
@@ -577,6 +584,31 @@ describe('tags-input directive', () => {
     });
   });
 
+  describe('add-on-comma option nokeypress', () => {
+    it('adds a new tag when the comma key is pressed and the option is true with no keypress event', () => {
+      // Arrange
+      compile('add-on-comma="true"');
+
+      // Act
+      let tag = 'foo';
+      tag.split('').forEach((char, index) => {
+        sendKeyPress(tag.charCodeAt(index));
+      });
+      sendTextInput(',');
+
+      // Assert
+      expect($scope.tags).toEqual([{ text: 'foo' }]);
+    });
+
+    it('initializes the option to true', () => {
+      // Arrange/Act
+      compile();
+
+      // Assert
+      expect(isolateScope.options.addOnComma).toBe(true);
+    });
+  });
+
   describe('add-on-blur option', () => {
     it('initializes the option to true', () => {
       // Arrange/Act