select2: tags mode with space separator, fix #357

CHANGELOG.txt

@@ -4,6 +4,7 @@ X-editable changelog
 
 Version 1.5.1 wip
 ----------------------------
+[bug #357] select2: tags mode with space separator (vitalets)
 [bug #374] dateui: clear button does not submit (vitalets)
 
 

src/inputs/select2/select2.js

@@ -200,17 +200,11 @@ $(function(){
        }, 
        
        value2input: function(value) {
-           //for local source use data directly from source (to allow autotext)
-           /*
-           if(!this.isRemote && !this.isMultiple) {
-               var items = $.fn.editableutils.itemsByValue(value, this.sourceData, this.idFunc);
-               if(items.length) {
-                   this.$input.select2('data', items[0]);
-                   return;
-               }
-           } 
-           */
-           
+           // if value array => join it anyway
+           if($.isArray(value)) {
+              value = value.join(this.getSeparator());
+           }
+
            //for remote source just set value, text is updated by initSelection
            if(!this.$input.data('select2')) {
                this.$input.val(value);
@@ -218,10 +212,18 @@ $(function(){
            } else {
                //second argument needed to separate initial change from user's click (for autosubmit)   
                this.$input.val(value).trigger('change', true); 
+
+               //Uncaught Error: cannot call val() if initSelection() is not defined
+               //this.$input.select2('val', value);
            }
            
-           //if remote source AND no user's initSelection provided --> try to use element's text
+           // if defined remote source AND no multiple mode AND no user's initSelection provided --> 
+           // we should somehow get text for provided id.
+           // The solution is to use element's text as text for that id
            if(this.isRemote && !this.isMultiple && !this.options.select2.initSelection) {
+               // customId and customText are methods to extract `id` and `text` from data object
+               // we can use this workaround only if user did not define these methods
+               // otherwise we cant construct data object
                var customId = this.options.select2.id,
                    customText = this.options.select2.formatSelection;
                if(!customId && !customText) {      
@@ -240,7 +242,7 @@ $(function(){
                 return str;
             }
             
-            separator = separator || this.options.select2.separator || $.fn.select2.defaults.separator;
+            separator = separator || this.getSeparator();
             
             var val, i, l;
                 
@@ -262,6 +264,10 @@ $(function(){
                 }
             });
         },
+
+        getSeparator: function() {
+            return this.options.select2.separator || $.fn.select2.defaults.separator;
+        },
         
         /*
         Converts source from x-editable format: {value: 1, text: "1"} to

test/unit/select2.js

@@ -142,6 +142,57 @@ $(function () {
         }, timeout);
      });      
      
+
+    asyncTest("local: tags with space separator", function () {
+        var sep = ' ', vsep = '-',
+            s = 'a,text2 abc d', 
+            text = 'a,text2-abc-d',
+            e = $('<a href="#" data-type="select2" data-name="select2" data-value="'+s+'"></a>').appendTo(fx).editable({
+            viewseparator: vsep,
+            select2: {
+              tags: [],
+              separator: sep
+            }
+        });
+
+        equal(e.data('editable').value.join(sep), s, 'initial value ok');
+        equal(e.data('editable').value.join(vsep), text, 'initial text ok');
+        
+        e.click();
+        var p = tip(e);
+        
+        ok(p.is(':visible'), 'popover visible');
+        var $input = p.find('input[type="hidden"]');
+        ok($input.length, 'input exists');
+        ok($input.select2, 'select2 applied');
+        equal($input.val(), s, 'selected value ok'); 
+      
+        equal(p.find('.select2-search-choice > div').length, 3, 'selected text ok');        
+        equal(p.find('.select2-search-choice > div').eq(0).text(), 'a,text2', 'text2 ok');        
+        equal(p.find('.select2-search-choice > div').eq(1).text(), 'abc', 'abc ok');        
+        equal(p.find('.select2-search-choice > div').eq(2).text(), 'd', 'd ok');        
+        
+        //select new value
+        s = 'a,text1 cde'; 
+        text = 'a,text1-cde';
+        $input.select2('val', ['a,text1', 'cde']);
+
+        equal($input.val(), s, 'new value ok');        
+        equal(p.find('.select2-search-choice > div').length, 2, 'new text ok');        
+        equal(p.find('.select2-search-choice > div').eq(0).text(), 'a,text1', 'text1 ok');        
+        equal(p.find('.select2-search-choice > div').eq(1).text(), 'cde', 'cde ok');   
+
+        p.find('form').submit();
+        
+        setTimeout(function() {
+            ok(!p.is(':visible'), 'popover closed');
+            equal(e.data('editable').value.join(sep), s, 'new value ok');
+            equal(e.text(), text, 'new text ok');             
+            
+            e.remove();
+            start();
+        }, timeout);
+     });       
  /*    
  asyncTest("local: tags (array of objects)", function () {
         var s = 'text2,abc', text = 'text2, abc',