From baa68dfd2c9f30e95b1e72bbac2e5688efd705b7 Mon Sep 17 00:00:00 2001
From: Kevin Brown <kevin@kevinbrown.in>
Date: Sun, 7 Jun 2015 00:39:11 -0400
Subject: [PATCH] Upgraded support for Select2 4.0.0

x-editable should now work out of the box with Select2 4.0.0.

This changes the headers in the x-editable Select2 files to better
address the current state of Select2.

This fixes some of the tests to better handle Select2 when attached
to a `<select>` in 4.0.0, as well as class name changes.
---
 src/inputs/select2/select2.js | 422 ++++++++++++++++++++++------------
 test/loader.js                | 187 ++++++++-------
 test/unit/select2.js          | 350 +++++++++++++++-------------
 3 files changed, 546 insertions(+), 413 deletions(-)

diff --git a/src/inputs/select2/select2.js b/src/inputs/select2/select2.js
index 0b3a7f3e..38fb4324 100644
--- a/src/inputs/select2/select2.js
+++ b/src/inputs/select2/select2.js
@@ -1,22 +1,22 @@
 /**
-Select2 input. Based on amazing work of Igor Vaynberg https://github.com/ivaynberg/select2.  
-Please see [original select2 docs](http://ivaynberg.github.com/select2) for detailed description and options.  
- 
-You should manually download and include select2 distributive:  
+Select2 input. Based on amazing work of Igor Vaynberg https://github.com/ivaynberg/select2.
+Please see [original select2 docs](http://ivaynberg.github.com/select2) for detailed description and options.
 
-    <link href="select2/select2.css" rel="stylesheet" type="text/css"></link>  
-    <script src="select2/select2.js"></script>  
-    
-To make it **bootstrap-styled** you can use css from [here](https://github.com/t0m/select2-bootstrap-css): 
+You should manually download and include select2 distributive:
 
-    <link href="select2-bootstrap.css" rel="stylesheet" type="text/css"></link>    
-    
-**Note:** currently `autotext` feature does not work for select2 with `ajax` remote source.    
-You need initially put both `data-value` and element's text youself:    
+    <link href="select2/select2.css" rel="stylesheet" type="text/css"></link>
+    <script src="select2/select2.js"></script>
+
+To make it **bootstrap-styled** you can use css from [here](https://github.com/fk/select2-bootstrap-theme):
+
+    <link href="select2-bootstrap.css" rel="stylesheet" type="text/css"></link>
+
+**Note:** currently `autotext` feature does not work for select2 with `ajax` remote source.
+You need initially put both `data-value` and element's text youself:
 
     <a href="#" data-type="select2" data-value="1">Text1</a>
-    
-    
+
+
 @class select2
 @extends abstractinput
 @since 1.4.1
@@ -73,57 +73,74 @@ $(function(){
                 return $.get('/getCountryById', { query: element.val() }, function (data) {
                     callback(data);
                 });
-            } 
-        }  
+            }
+        }
     });
 });
 </script>
 **/
 (function ($) {
     "use strict";
-    
+
     var Constructor = function (options) {
         this.init('select2', options, Constructor.defaults);
 
         options.select2 = options.select2 || {};
 
-        this.sourceData = null;
-        
-        //placeholder
-        if(options.placeholder) {
+        // placeholder
+        if (options.placeholder) {
             options.select2.placeholder = options.placeholder;
         }
-       
-        //if not `tags` mode, use source
-        if(!options.select2.tags && options.source) {
-            var source = options.source;
-            //if source is function, call it (once!)
-            if ($.isFunction(options.source)) {
-                source = options.source.call(options.scope);
-            }               
-
-            if (typeof source === 'string') {
-                options.select2.ajax = options.select2.ajax || {};
-                //some default ajax params
-                if(!options.select2.ajax.data) {
-                    options.select2.ajax.data = function(term) {return { query:term };};
-                }
-                if(!options.select2.ajax.results) {
-                    options.select2.ajax.results = function(data) { return {results:data };};
-                }
-                options.select2.ajax.url = source;
-            } else {
-                //check format and convert x-editable format to select2 format (if needed)
-                this.sourceData = this.convertSource(source);
-                options.select2.data = this.sourceData;
+
+        // Automatically recognize the old `tags` behaviour and convert it into
+        // `tags` + `data`, which is what Select2 4.0.0 expects.
+        //
+        // Also defaults to being a multiple selection, like older versions of
+        // Select2.
+        if ($.isArray(options.select2.tags)) {
+            options.select2.data = options.select2.tags;
+            options.select2.tags = true;
+            options.select2.multiple = true;
+        }
+
+        if (options.select2.formatSelection) {
+            options.select2.templateSelection = options.select2.formatSelection;
+        }
+
+        if (options.select2.formatResult) {
+            options.select2.templateResult = options.select2.formatResult;
+        }
+
+        if (options.select2.ajax) {
+            if (options.select2.ajax.results) {
+                options.select2.ajax.processResults = options.select2.ajax.results;
             }
-        } 
+
+            if (options.select2.ajax.processResults) {
+                var processResults = options.select2.ajax.processResults;
+
+                options.select2.ajax.processResults = $.proxy(function (data) {
+                    var results = processResults(data);
+
+                    results.results = this.convertSource(results.results);
+
+                    console.log('processResults', data, results)
+
+                    return results;
+                }, this);
+            }
+        }
+
+        if (options.select2.initSelection) {
+            this.options.initFunction = options.select2.initSelection;
+            delete options.select2.initSelection;
+        }
 
         //overriding objects in config (as by default jQuery extend() is not recursive)
         this.options.select2 = $.extend({}, Constructor.defaults.select2, options.select2);
 
         //detect whether it is multi-valued
-        this.isMultiple = this.options.select2.tags || this.options.select2.multiple;
+        this.isMultiple = this.options.select2.multiple;
         this.isRemote = ('ajax' in this.options.select2);
 
         //store function returning ID of item
@@ -141,128 +158,195 @@ $(function(){
         }
     };
 
-    $.fn.editableutils.inherit(Constructor, $.fn.editabletypes.abstractinput);
+    $.fn.editableutils.inherit(Constructor, $.fn.editabletypes.select);
 
     $.extend(Constructor.prototype, {
-        render: function() {
-            this.setClass();
+        render: function () {
+            console.log('render');
+            if (!this.$input.data('select2')) {
+                this.$input.select2(this.options.select2);
+            }
+            console.log(this.$input.html())
 
-            //can not apply select2 here as it calls initSelection 
-            //over input that does not have correct value yet.
-            //apply select2 only in value2input
-            //this.$input.select2(this.options.select2);
+            if (this.options.initFunction) {
+                this.options.initFunction(this.$input, $.proxy(function (initial) {
+                    console.log('initFunction', initial);
+                    if ($.isArray(initial)) {
+
+                    } else {
+                        var id = this.idFunc(initial);
+                        initial.id = id;
+                        var option = new Option(initial.text, id);
+                        option.selected = true;
+
+                        $(option).data('data', initial);
 
-            //when data is loaded via ajax, we need to know when it's done to populate listData
-            if(this.isRemote) {
-                //listen to loaded event to populate data
-                this.$input.on('select2-loaded', $.proxy(function(e) {
-                    this.sourceData = e.items.results;
+                        this.$input.append(option);
+                        this.$input.trigger('change');
+                    }
                 }, this));
+
+                delete this.options.initFunction;
             }
 
+            return Constructor.superclass.render.call(this);
+        },
+
+        renderList: function() {
+            console.log('renderList', arguments)
+            var $options = this.$input.children();
+            Constructor.superclass.renderList.apply(this, arguments);
+            this.$input.prepend($options);
+
+            //can not apply select2 here as it calls initSelection
+            //over input that does not have correct value yet.
+            //apply select2 only in value2input
+            //this.$input.select2(this.options.select2);
+
             //trigger resize of editableform to re-position container in multi-valued mode
-            if(this.isMultiple) {
+            if (this.isMultiple) {
                this.$input.on('change', function() {
                    $(this).closest('form').parent().triggerHandler('resize');
                });
             }
        },
 
-       value2html: function(value, element) {
-           var text = '', data,
-               that = this;
+       /**
+        * Used to convert a value (`data-value` or `options.value`) to the actual
+        * selected value that can be processed by x-editable.
+        *
+        * This is needed because x-editable does not support multiple selections
+        * by default.
+        */
+       str2value: function (str) {
+           console.log('str2value', str);
 
-           if(this.options.select2.tags) { //in tags mode just assign value
-              data = value; 
-              //data = $.fn.editableutils.itemsByValue(value, this.options.select2.tags, this.idFunc);
-           } else if(this.sourceData) {
-              data = $.fn.editableutils.itemsByValue(value, this.sourceData, this.idFunc); 
-           } else {
-              //can not get list of possible values 
-              //(e.g. autotext for select2 with ajax source)
+           if ($.isArray(str)) {
+               return str;
            }
 
-           //data may be array (when multiple values allowed)
-           if($.isArray(data)) {
-               //collect selected data and show with separator
-               text = [];
-               $.each(data, function(k, v){
-                   text.push(v && typeof v === 'object' ? that.formatSelection(v) : v);
-               });
-           } else if(data) {
-               text = that.formatSelection(data);
+           if (this.isMultiple) {
+               return str.split(this.getSeparator());
            }
 
-           text = $.isArray(text) ? text.join(this.options.viewseparator) : text;
+           return str;
+       },
 
-           //$(element).text(text);
-           Constructor.superclass.value2html.call(this, text, element); 
+       /**
+        * Called when no value is supplied, used to determine the value based on the text.
+        */
+       html2value: function (html) {
+           console.log('html2value', html, this.isMultiple);
+           if (!this.isMultiple) {
+               return html;
+           }
+
+           return html.split(this.options.viewseparator);
        },
 
-       html2value: function(html) {
-           return this.options.select2.tags ? this.str2value(html, this.options.viewseparator) : null;
+       /**
+        * Used to update the text in the link based on the selected value
+        */
+       value2html: function (value, element) {
+           console.log('value2html', arguments)
+           Constructor.superclass.value2html.apply(this, arguments);
        },
 
-       value2input: function(value) {
-           // if value array => join it anyway
-           if($.isArray(value)) {
-              value = value.join(this.getSeparator());
+       /**
+        * Used to convert the value to the text representation of it.
+        *
+        * Superclass doesn't support multiple selects, so we need to override this.
+        */
+       value2htmlFinal: function (value, element) {
+           // The select input type can handle single selects fine
+           // We have to special case multiple selects, which aren't supported
+           // by default.
+           if (!$.isArray(value)) {
+               console.log('value2htmlFinal', arguments, 'non-array');
+               return Constructor.superclass.value2htmlFinal.call(this, value, element);
            }
 
-           //for remote source just set value, text is updated by initSelection
-           if(!this.$input.data('select2')) {
-               this.$input.val(value);
-               this.$input.select2(this.options.select2);
-           } else {
-               //second argument needed to separate initial change from user's click (for autosubmit)   
-               this.$input.val(value).trigger('change', true); 
+           var results = [];
 
-               //Uncaught Error: cannot call val() if initSelection() is not defined
-               //this.$input.select2('val', value);
-           }
+           // Convert all of the values into their text
+           for (var v = 0; v < value.length; v++) {
+               var val = value[v];
 
-           // 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 (exclude empty)
-           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) {
-                   var $el = $(this.options.scope);
-                   if (!$el.data('editable').isEmpty) {
-                       var data = {id: value, text: $el.text()};
-                       this.$input.select2('data', data); 
-                   }
+               var items = $.fn.editableutils.itemsByValue(val, this.sourceData);
+
+               // There are no items in cases like tagging
+               // So just assume that the tag value is also the text
+               if (items.length === 0) {
+                   results.push(value[v]);
+               } else {
+                   results.push(items[0].text);
                }
            }
-       },
-       
-       input2value: function() { 
-           return this.$input.select2('val');
+
+           console.log('results', results);
+
+           // The output is the text joined by the viewseparator (comma by default)
+           results = results.join(this.options.viewseparator);
+
+           console.log('value2htmlFinal', arguments, results);
+
+           $(element)[this.options.escape ? 'text' : 'html']($.trim(results));
        },
 
-       str2value: function(str, separator) {
-            if(typeof str !== 'string' || !this.isMultiple) {
-                return str;
-            }
+       /**
+        * Used to set the value of Select2 based on the current x-editable selections.
+        */
+       value2input: function (value) {
+           console.log('value2input', value)
+
+           // The value for a multiple select can be passed in as a single string
+           // This will convert it from a string to an array of data values
+           if (value && !$.isArray(value) && this.isMultiple) {
+               value = this.str2value(value);
 
-            separator = separator || this.getSeparator();
+               console.log('value2input', value, 'fixed');
+           }
 
-            var val, i, l;
+           if (!value) {
+               return;
+           }
 
-            if (str === null || str.length < 1) {
-                return null;
-            }
-            val = str.split(separator);
-            for (i = 0, l = val.length; i < l; i = i + 1) {
-                val[i] = $.trim(val[i]);
-            }
+           // Branch off based on whether or not it's a multiple select
+           // Either way, we are adding `<option>` tags for selected values that
+           // don't already exist, so they can be selected correctly.
+           if ($.isArray(value)) {
+               var $options = this.$input.find('option');
+
+               for (var v = 0; v < value.length; v++) {
+                   var $filtered = $options.filter(function (i, elem) {
+                       return elem.value == value[v].toString();
+                   });
+
+                   // Check if the option doesn't already exist
+                   if ($filtered.length === 0) {
+                       // Automatically create the option for the value
+                       this.$input.append(new Option(value[v], value[v]));
+                   }
+               }
+           } else {
+               var $filtered = this.$input.find('option').filter(function (i, elem) {
+                   return elem.value == value.toString()
+               });
 
-            return val;
+               if ($filtered.length === 0) {
+                   var $el = $(this.options.scope);
+                   var text;
+                   if (!$el.data('editable').isEmpty) {
+                       text = $el.text();
+                   } else {
+                       text = value;
+                   }
+                   this.$input.append(new Option(text, value));
+               }
+           }
+
+           // After setting the value we must trigger the change event for Select2
+           this.$input.val(value).trigger('change');
        },
 
         autosubmit: function() {
@@ -274,22 +358,26 @@ $(function(){
         },
 
         getSeparator: function() {
-            return this.options.select2.separator || $.fn.select2.defaults.separator;
+            return this.options.select2.separator || this.options.separator;
         },
 
         /*
         Converts source from x-editable format: {value: 1, text: "1"} to
         select2 format: {id: 1, text: "1"}
+
+        Also normalizes the id for the source values to always be a string.
         */
-        convertSource: function(source) {
-            if($.isArray(source) && source.length && source[0].value !== undefined) {
-                for(var i = 0; i<source.length; i++) {
-                    if(source[i].value !== undefined) {
+        convertSource: function (source) {
+            if ($.isArray(source)) {
+                for (var i = 0; i < source.length; i++) {
+                    if (source[i].value !== undefined) {
                         source[i].id = source[i].value;
-                        delete source[i].value;
                     }
+
+                    source[i].id = "" + this.idFunc(source[i]);
                 }
             }
+
             return source;
         },
         
@@ -297,6 +385,32 @@ $(function(){
         	this.$input.select2('open');
         },
         
+
+        /**
+         * Convert the Select2 data array into a x-editable compatible list of
+         * selections.
+         *
+         * This will also automatically pull selected data from Select2 if
+         * nothing was passed in and Select2 was already initialized.
+         */
+        makeArray: function (data) {
+            if (!data && this.$input && this.$input.data('select2')) {
+                data = this.$input.select2('data');
+            }
+
+            console.log('makeArray', data);
+
+            if ($.isArray(data)) {
+                for (var i = 0; i < data.length; i++) {
+                    if (data[i].id !== undefined) {
+                        data[i].value = data[i].id;
+                    }
+                }
+            }
+
+            return Constructor.superclass.makeArray.call(this, data);
+        },
+
         destroy: function() {
 	        if(this.$input) {
 	            if(this.$input.data('select2')) {
@@ -304,19 +418,14 @@ $(function(){
 	            }
 	        }
         }
-        
+
     });
 
-    Constructor.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
-        /**
-        @property tpl 
-        @default <input type="hidden">
-        **/
-        tpl:'<input type="hidden">',
+    Constructor.defaults = $.extend({}, $.fn.editabletypes.select.defaults, {
         /**
         Configuration of select2. [Full list of options](http://ivaynberg.github.com/select2).
 
-        @property select2 
+        @property select2
         @type object
         @default null
         **/
@@ -324,7 +433,7 @@ $(function(){
         /**
         Placeholder attribute of select
 
-        @property placeholder 
+        @property placeholder
         @type string
         @default null
         **/
@@ -334,19 +443,28 @@ $(function(){
         Please note, that format is different from simple `select` input: use 'id' instead of 'value'.
         E.g. `[{id: 1, text: "text1"}, {id: 2, text: "text2"}, ...]`.
 
-        @property source 
+        @property source
         @type array|string|function
-        @default null        
+        @default null
         **/
         source: null,
         /**
         Separator used to display tags.
 
-        @property viewseparator 
+        @property viewseparator
+        @type string
+        @default ', '
+        **/
+        viewseparator: ', ',
+
+        /**
+        Separator of values when reading from `data-value` attribute
+
+        @property separator
         @type string
-        @default ', '        
+        @default ','
         **/
-        viewseparator: ', '
+        separator: ','
     });
 
     $.fn.editabletypes.select2 = Constructor;
diff --git a/test/loader.js b/test/loader.js
index 2176d5b1..bb5d5b8e 100644
--- a/test/loader.js
+++ b/test/loader.js
@@ -2,59 +2,59 @@
 Loads all js files via require.js
 */
 define(function () {
-         
+
     function loadCss(url) {
         var link = document.createElement("link");
         link.type = "text/css";
         link.rel = "stylesheet";
         link.href = url;
         document.getElementsByTagName("head")[0].appendChild(link);
-    };     
-                
+    };
+
     return {
         loadCss: loadCss,
         getConfig: function (baseUrl) {
 
             var
                 params = this.getParams(),
-                f = params.f, 
-                c = params.c;            
-                  
-            var 
+                f = params.f,
+                c = params.c;
+
+            var
                 jqueryui_ver = '1.10.3',
             //    jqueryui_ver = '1.9.1',
                 bs2_ver = '232',
                 bs3_ver = '300',
                 //path aliases
                 paths = {
-                    "bootstrap": "../test/libs/bootstrap"+(f === 'bootstrap2' ? bs2_ver : bs3_ver), 
-                    
-                  //  "jqueryui": "../test/libs/jquery-ui-"+jqueryui_ver+".custom", 
-                    "jqueryui_js": "../test/libs/jquery-ui-"+jqueryui_ver+".custom/js/jquery-ui-"+jqueryui_ver+".custom", 
-                     
+                    "bootstrap": "../test/libs/bootstrap"+(f === 'bootstrap2' ? bs2_ver : bs3_ver),
+
+                  //  "jqueryui": "../test/libs/jquery-ui-"+jqueryui_ver+".custom",
+                    "jqueryui_js": "../test/libs/jquery-ui-"+jqueryui_ver+".custom/js/jquery-ui-"+jqueryui_ver+".custom",
+
                     "dateui_js": "inputs/dateui/jquery-ui-datepicker/js/jquery-ui-"+jqueryui_ver+".custom",
-                    
+
                     "poshytip": "../test/libs/poshytip",
-                    
-                    "test": "../test" 
-                },          
-          
+
+                    "test": "../test"
+                },
+
                 shim = {
                 'containers/editable-container': {
                     deps: ['require', 'editable-form/editable-form-utils', 'editable-form/editable-form'],
                     init: function(require) {
-                        loadCss(require.toUrl("./editable-container.css")); 
-                    }                  
-                },  
-                
+                        loadCss(require.toUrl("./editable-container.css"));
+                    }
+                },
+
                 //inline container
-                'containers/editable-inline': ['containers/editable-container'],                
-                 
+                'containers/editable-inline': ['containers/editable-container'],
+
                 'element/editable-element': {
                     deps: ['require'], //here should be dynamically added container
                     init: function(require) {
-                        loadCss(require.toUrl("./editable-element.css")); 
-                    }                         
+                        loadCss(require.toUrl("./editable-element.css"));
+                    }
                 },
                 /*
                 common inputs
@@ -70,67 +70,67 @@ define(function () {
                     'inputs-ext/address/address',
                     'inputs/select2/select2'],
                     init: function(require) {
-                        loadCss(require.toUrl("./editable-form.css")); 
-                    }      
+                        loadCss(require.toUrl("./editable-form.css"));
+                    }
                 },
                 'inputs/select': ['inputs/list'],
                 'inputs/checklist': ['inputs/list'],
                 'inputs/list': ['inputs/abstract'],
                 'inputs/text': ['inputs/abstract'],
                 'inputs/textarea': ['inputs/abstract'],
-                'inputs/abstract': ['editable-form/editable-form-utils'],   
-                'inputs/html5types': ['inputs/text'], 
+                'inputs/abstract': ['editable-form/editable-form-utils'],
+                'inputs/html5types': ['inputs/text'],
                 'inputs/combodate/combodate': ['inputs/abstract', 'inputs/combodate/lib/combodate', 'inputs/combodate/lib/moment.min'],
                 //moment 1.7.2
                 //'inputs/combodate/combodate': ['inputs/abstract', 'inputs/combodate/lib/combodate', 'inputs/combodate/lib/moment.min.1.7.2'],
-                'inputs/typeahead': ['inputs/list'],  
+                'inputs/typeahead': ['inputs/list'],
 
 
                 /* ------------------------------
                    bootstrap
-                   ------------------------------ */                 
+                   ------------------------------ */
                 'bootstrap/js/bootstrap': {
                     deps: ['require'],
                     init: function(require) {
-                        loadCss(require.toUrl("../css/bootstrap.css")); 
+                        loadCss(require.toUrl("../css/bootstrap.css"));
                         //add responsive css for bs2
                         if(f === 'bootstrap2') {
                            loadCss(require.toUrl("../css/bootstrap-responsive.css"));
-                        } 
-                    }                
+                        }
+                    }
                 },
                 'editable-form/editable-form-bootstrap': [
-                    'editable-form/editable-form', 
+                    'editable-form/editable-form',
                     'bootstrap/js/bootstrap'
                 ],
                 'editable-form/editable-form-bootstrap3': [
-                    'editable-form/editable-form', 
+                    'editable-form/editable-form',
                     'bootstrap/js/bootstrap'
                 ],
                 'containers/editable-popover': [
-                    'containers/editable-inline', 
+                    'containers/editable-inline',
                     'bootstrap/js/bootstrap'
                 ],
                 'containers/editable-popover3': [
-                    'containers/editable-inline', 
+                    'containers/editable-inline',
                     'bootstrap/js/bootstrap'
                 ],
                 'inputs/date/date': {
-                    deps: ['require', 
+                    deps: ['require',
                     'bootstrap/js/bootstrap',
-                    'inputs/abstract', 
+                    'inputs/abstract',
                     'inputs/date/bootstrap-datepicker/js/bootstrap-datepicker'],
                     init: function(require) {
-                        loadCss(require.toUrl("./bootstrap-datepicker/css/datepicker.css")); 
+                        loadCss(require.toUrl("./bootstrap-datepicker/css/datepicker.css"));
                     }
                 },
                 'inputs/datetime/datetime': {
-                    deps: ['require', 
+                    deps: ['require',
                     'bootstrap/js/bootstrap',
-                    'inputs/abstract', 
+                    'inputs/abstract',
                     'inputs/datetime/bootstrap-datetimepicker/js/bootstrap-datetimepicker'],
                     init: function(require) {
-                        loadCss(require.toUrl("./bootstrap-datetimepicker/css/datetimepicker.css")); 
+                        loadCss(require.toUrl("./bootstrap-datetimepicker/css/datetimepicker.css"));
                     }
                 },
 
@@ -138,30 +138,27 @@ define(function () {
 //                'inputs-ext/wysihtml5/bootstrap-wysihtml5-0.0.2/bootstrap-wysihtml5-0.0.2.min': ['inputs-ext/wysihtml5/bootstrap-wysihtml5-0.0.2/wysihtml5-0.3.0.min'],
                 'inputs-ext/wysihtml5/bootstrap-wysihtml5-0.0.2/bootstrap-wysihtml5-0.0.2': ['inputs-ext/wysihtml5/bootstrap-wysihtml5-0.0.2/wysihtml5-0.3.0'],
                 'inputs-ext/wysihtml5/wysihtml5': {
-                    deps: ['require', 
+                    deps: ['require',
                     'bootstrap/js/bootstrap',
-                    'inputs/abstract', 
+                    'inputs/abstract',
 //                    'inputs-ext/wysihtml5/bootstrap-wysihtml5-0.0.2/bootstrap-wysihtml5-0.0.2.min'],
                     'inputs-ext/wysihtml5/bootstrap-wysihtml5-0.0.2/bootstrap-wysihtml5-0.0.2'],
                     init: function(require) {
-                        loadCss(require.toUrl("./bootstrap-wysihtml5-0.0.2/bootstrap-wysihtml5-0.0.2.css")); 
-                        //loadCss(require.toUrl("./bootstrap-wysihtml5-0.0.2/wysiwyg-color.css")); 
+                        loadCss(require.toUrl("./bootstrap-wysihtml5-0.0.2/bootstrap-wysihtml5-0.0.2.css"));
+                        //loadCss(require.toUrl("./bootstrap-wysihtml5-0.0.2/wysiwyg-color.css"));
                     }
                 },
-                
+
                 //select2
                 'inputs/select2/select2': {
-                    deps: ['require', 
+                    deps: ['require',
                     'inputs/select2/lib/select2',
-                    'inputs/abstract'], 
+                    'inputs/select'],
                     init: function(require) {
-                        loadCss(require.toUrl("./lib/select2.css")); 
-                        if (f === 'bootstrap2' || f === 'bootstrap3') {
-                            loadCss(require.toUrl("./lib/select2-bootstrap.css"));
-                        } 
+                        loadCss(require.toUrl("./lib/select2.css"));
                     }
-                },                
-                
+                },
+
                 //datefield
                 'inputs/date/datefield': ['inputs/date/date'],
 
@@ -170,67 +167,67 @@ define(function () {
 
                 /* ------------------------------
                    jqueryui
-                   ------------------------------ */ 
+                   ------------------------------ */
                 'jqueryui_js': {
                     deps: ['require'],
                     //temp: test simultaneous jquery-ui with bootstrap
                     //deps: ['require', 'bootstrap/js/bootstrap'],
                     init: function(require) {
-                        //loadCss(require.toUrl("../css/redmond/jquery-ui-1.10.1.custom.css")); 
-                        loadCss(require.toUrl("../test/libs/jquery-ui-"+jqueryui_ver+".custom/css/redmond/jquery-ui-"+jqueryui_ver+".custom.css")); 
-                    }                
-                },  
+                        //loadCss(require.toUrl("../css/redmond/jquery-ui-1.10.1.custom.css"));
+                        loadCss(require.toUrl("../test/libs/jquery-ui-"+jqueryui_ver+".custom/css/redmond/jquery-ui-"+jqueryui_ver+".custom.css"));
+                    }
+                },
                 'editable-form/editable-form-jqueryui': [
-                    'editable-form/editable-form', 
+                    'editable-form/editable-form',
                     'jqueryui_js'
-                ],            
+                ],
                 'containers/editable-tooltip': [
-                    'containers/editable-inline', 
+                    'containers/editable-inline',
                     'jqueryui_js'
-                ],                      
+                ],
                 'inputs/dateui/dateui': ['inputs/abstract'],
                 'inputs/dateui/dateuifield': ['inputs/dateui/dateui'],
 
 
                 /* ------------------------------
                    plain
-                   ------------------------------ */                 
-                'containers/editable-poshytip': [ 
-                    'containers/editable-inline', 
+                   ------------------------------ */
+                'containers/editable-poshytip': [
+                    'containers/editable-inline',
                     'poshytip/jquery.poshytip'
                 ],
                 'poshytip/jquery.poshytip': {
                     deps: ['require'],
                     init: function(require) {
-                        loadCss(require.toUrl("./tip-yellowsimple/tip-yellowsimple.css")); 
-                    }                
+                        loadCss(require.toUrl("./tip-yellowsimple/tip-yellowsimple.css"));
+                    }
                 },
                 'dateui_js': {
                     deps: ['require'],
                     init: function(require) {
-                        //loadCss(require.toUrl('../css/redmond/jquery-ui-'+jqueryui_ver+'.custom.css')); 
-                        loadCss(require.toUrl('inputs/dateui/jquery-ui-datepicker/css/redmond/jquery-ui-'+jqueryui_ver+'.custom.css')); 
-                    } 
+                        //loadCss(require.toUrl('../css/redmond/jquery-ui-'+jqueryui_ver+'.custom.css'));
+                        loadCss(require.toUrl('inputs/dateui/jquery-ui-datepicker/css/redmond/jquery-ui-'+jqueryui_ver+'.custom.css'));
+                    }
                 },
-                                         
+
 
                 /* ------------------------------
                    inputs-ext
-                   ------------------------------ */                  
+                   ------------------------------ */
                 'inputs-ext/address/address': {
                     deps: ['require', 'inputs/abstract'],
                     init: function(require) {
-                        loadCss(require.toUrl("./address.css")); 
+                        loadCss(require.toUrl("./address.css"));
                     }
                 },
-                'inputs-ext/typeaheadjs/typeaheadjs': { 
+                'inputs-ext/typeaheadjs/typeaheadjs': {
                     deps: [
                         'require',
                         'inputs/text',
                         'inputs-ext/typeaheadjs/lib/typeahead'
                     ],
                     init: function(require) {
-                        loadCss(require.toUrl("./lib/typeahead.js-bootstrap.css")); 
+                        loadCss(require.toUrl("./lib/typeahead.js-bootstrap.css"));
                     }
                 }
             };
@@ -238,9 +235,9 @@ define(function () {
             /*
              modify shim for bootstrap, jqueryui or plain
             */
-            if(f === 'bootstrap3') { 
+            if(f === 'bootstrap3') {
                 //bootstrap 3
-                shim['editable-form/editable-form'].deps = shim['editable-form/editable-form'].deps.concat( 
+                shim['editable-form/editable-form'].deps = shim['editable-form/editable-form'].deps.concat(
                  [
                   'inputs/date/datefield',
                   'inputs/datetime/datetimefield',
@@ -251,9 +248,9 @@ define(function () {
 
                 shim['element/editable-element'].deps.push('editable-form/editable-form-bootstrap3');
                 shim['element/editable-element'].deps.push('containers/editable-popover3');
-            } else if(f === 'bootstrap2') { 
+            } else if(f === 'bootstrap2') {
                 //bootstrap 2
-                shim['editable-form/editable-form'].deps = shim['editable-form/editable-form'].deps.concat( 
+                shim['editable-form/editable-form'].deps = shim['editable-form/editable-form'].deps.concat(
                  [
                   'inputs/date/datefield',
                   'inputs/datetime/datetimefield',
@@ -267,38 +264,38 @@ define(function () {
                 shim['editable-form/editable-form'].deps.push('inputs/dateui/dateuifield');
                 shim['element/editable-element'].deps.push('editable-form/editable-form-jqueryui');
                 shim['element/editable-element'].deps.push('containers/editable-tooltip');
-            } else {    
+            } else {
                 //plain
                 shim['editable-form/editable-form'].deps.push('inputs/dateui/dateuifield');
                 shim['inputs/dateui/dateui'].push('dateui_js');
-                shim['element/editable-element'].deps.push('containers/editable-poshytip');        
-            }            
-            
-            
+                shim['element/editable-element'].deps.push('containers/editable-poshytip');
+            }
+
+
             /*
              return requirejs config
-            */            
-            
+            */
+
             return {
                 baseUrl: baseUrl,
                 paths: paths,
                 shim: shim
-            };  
+            };
         },
 
         getParams: function() {
             var url = window.location.href, f, c;
-            if(url.match(/f=jqueryui/i)) { 
+            if(url.match(/f=jqueryui/i)) {
                 f = 'jqueryui';
             } else if(url.match(/f=plain/i)) {
                 f = 'plain';
-            } else if(url.match(/f=bootstrap3/i) || url.match(/f=bs3/i)) {      
+            } else if(url.match(/f=bootstrap3/i) || url.match(/f=bs3/i)) {
                 f = 'bootstrap3';
-            } else {      
+            } else {
                 f = 'bootstrap2';
             }
             c = url.match(/c=inline/i) ? 'inline' : 'popup';
             return {f: f, c: c};
         }
     }
-});
\ No newline at end of file
+});
diff --git a/test/unit/select2.js b/test/unit/select2.js
index 01f521cd..0d97aa16 100644
--- a/test/unit/select2.js
+++ b/test/unit/select2.js
@@ -1,13 +1,13 @@
 $(function () {
-   
+
     module("select2", {
         setup: function(){
             sfx = $('#qunit-fixture'),
-            fx = $('#async-fixture');               
+            fx = $('#async-fixture');
             $.support.transition = false;
         }
-    });  
-    
+    });
+
      asyncTest("local: init-change-save (not multiple)", function () {
         var s = 2, text = 'text2',
             e = $('<a href="#" data-type="select2" data-name="select2" data-value="'+s+'"></a>').appendTo(fx).editable({
@@ -17,86 +17,86 @@ $(function () {
 
         //autotext
         equal(e.data('editable').value, s, 'initial value ok');
-        equal(e.text(), text, 'intial text ok'); 
-        
+        equal(e.text(), text, 'intial text ok');
+
         e.click();
         var p = tip(e);
-        
         ok(p.is(':visible'), 'popover visible');
-        var $input = p.find('input[type="hidden"]');
+        var $input = p.find('select');
         ok($input.length, 'input exists');
         ok($input.select2, 'select2 applied');
-        equal($input.val(), e.data('editable').value, 'selected value correct');        
-        equal(p.find('.select2-choice span').text(), text, 'selected text correct');        
-        
+        equal($input.val(), e.data('editable').value, 'selected value correct');
+        equal(p.find('.select2-selection').text(), text, 'selected text correct');
+
         //select new value
-        s = 1; 
+        s = 1;
         text = 'text1';
-        $input.select2('val', s);
+        $input.val(s).trigger('change');
 
-        equal($input.val(), s, 'new value ok');        
-        equal(p.find('.select2-choice span').text(), text, 'new text ok');
+        equal($input.val(), s, 'new value ok');
+        equal(p.find('.select2-selection').text(), text, 'new text ok');
 
         p.find('form').submit();
-        
+
         setTimeout(function() {
             ok(!p.is(':visible'), 'popover closed');
             equal(e.data('editable').value, s, 'new value ok');
-            equal(e.text(), text, 'new text ok');             
-            
+            equal(e.text(), text, 'new text ok');
+
             e.remove();
             start();
         }, timeout);
-     });  
-     
+     });
+
      asyncTest("local: init-change-save (multiple)", function () {
         var s = '2,3', text = 'text2, text3',
             e = $('<a href="#" data-type="select2" data-name="select2" data-value="'+s+'"></a>').appendTo(fx).editable({
             source: [{id: 1, text: 'text1'}, {id: 2, text: 'text2'}, {id: 3, text: 'text3'}],
-            viewseparator: ', ',
             select2: {
                 multiple: true
             }
         });
 
+        console.log('init', e.data('editable').value)
+
         //autotext
         equal(e.data('editable').value.join(','), s, 'initial value ok');
-        equal(e.text(), text, 'intial text ok'); 
-        
+        equal(e.text(), text, 'intial text ok');
+
         e.click();
         var p = tip(e);
-        
+
         ok(p.is(':visible'), 'popover visible');
-        var $input = p.find('input[type="hidden"]');
+        var $input = p.find('select');
         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, 2, 'selected text ok');        
-        equal(p.find('.select2-search-choice > div').eq(0).text(), 'text2', 'text2 ok');        
-        equal(p.find('.select2-search-choice > div').eq(1).text(), 'text3', 'text3 ok');        
-        
+        ok($input.data('select2'), 'select2 applied');
+        equal($input.val(), s, 'selected value ok');
+        equal(p.find('.select2-selection__choice').length, 2, 'selected text ok');
+        equal(p.find('.select2-selection__choice').eq(0).text().substr(1), 'text2', 'text2 ok');
+        equal(p.find('.select2-selection__choice').eq(1).text().substr(1), 'text3', 'text3 ok');
+
         //select new value
-        s = '1,2'; 
+        s = '1,2';
         text = 'text1, text2';
-        $input.select2('val', [1, 2]);
+        $input.val([1, 2]).trigger('change');
 
-        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(), 'text1', 'text1 ok');        
-        equal(p.find('.select2-search-choice > div').eq(1).text(), 'text2', 'text2 ok');  
+        equal($input.val(), s, 'new value ok');
+        equal(p.find('.select2-selection__choice').length, 2, 'new text ok');
+        equal(p.find('.select2-selection__choice').eq(0).text().substr(1), 'text1', 'text1 ok');
+        equal(p.find('.select2-selection__choice').eq(1).text().substr(1), 'text2', 'text2 ok');
 
         p.find('form').submit();
-        
+
         setTimeout(function() {
             ok(!p.is(':visible'), 'popover closed');
             equal(e.data('editable').value, s, 'new value ok');
-            equal(e.text(), text, 'new text ok');             
-            
+            equal(e.text(), text, 'new text ok');
+
             e.remove();
             start();
         }, timeout);
-     });       
-   
+     });
+
     asyncTest("local: tags (simple array)", function () {
         var s = 'text2,abc', text = 'text2, abc',
             e = $('<a href="#" data-type="select2" data-name="select2">'+text+'</a>').appendTo(fx).editable({
@@ -106,46 +106,52 @@ $(function () {
             }
         });
 
+        console.log('init', e.data('editable'))
+
         equal(e.data('editable').value.join(','), s, 'initial value ok');
-        
+
         e.click();
         var p = tip(e);
-        
+
         ok(p.is(':visible'), 'popover visible');
-        var $input = p.find('input[type="hidden"]');
+        var $input = p.find('select');
         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, 2, 'selected text ok');        
-        equal(p.find('.select2-search-choice > div').eq(0).text(), 'text2', 'text2 ok');        
-        equal(p.find('.select2-search-choice > div').eq(1).text(), 'abc', 'abc ok');        
-        
+        ok($input.data('select2'), 'select2 applied');
+        equal($input.val(), s, 'selected value ok');
+        equal(p.find('.select2-selection__choice').length, 2, 'selected text ok');
+        equal(p.find('.select2-selection__choice').eq(0).text().substr(1), 'text2', 'text2 ok');
+        equal(p.find('.select2-selection__choice').eq(1).text().substr(1), 'abc', 'abc ok');
+
+        $input.append(new Option('cde', 'cde'));
+
         //select new value
-        s = 'text1,cde'; 
+        s = 'text1,cde';
         text = 'text1, cde';
-        $input.select2('val', ['text1', 'cde']);
+        $input.val(['text1', 'cde']).trigger('change');
 
-        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(), 'text1', 'text1 ok');        
-        equal(p.find('.select2-search-choice > div').eq(1).text(), 'cde', 'cde ok');   
+        equal($input.val().join(','), s, 'new value ok');
+        equal(p.find('.select2-selection__choice').length, 2, 'new text ok');
+        equal(p.find('.select2-selection__choice').eq(0).text().substr(1), 'text1', 'text1 ok');
+        equal(p.find('.select2-selection__choice').eq(1).text().substr(1), 'cde', 'cde ok');
 
+        console.log('pre-submit');
         p.find('form').submit();
-        
+        console.log('post-submit')
+
         setTimeout(function() {
             ok(!p.is(':visible'), 'popover closed');
-            equal(e.data('editable').value, s, 'new value ok');
-            equal(e.text(), text, 'new text ok');             
-            
+            equal(e.data('editable').value.join(','), s, 'new value ok');
+            equal(e.text(), text, 'new text ok');
+
             e.remove();
             start();
         }, timeout);
-     });      
-     
+     });
+
 
     asyncTest("local: tags with space separator", function () {
         var sep = ' ', vsep = '-',
-            s = 'a,text2 abc d', 
+            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,
@@ -157,43 +163,47 @@ $(function () {
 
         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"]');
+        var $input = p.find('select');
         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');        
-        
+        ok($input.data('select2'), 'select2 applied');
+        equal($input.val().join(sep), s, 'selected value ok');
+
+        equal(p.find('.select2-selection__choice').length, 3, 'selected text ok');
+        equal(p.find('.select2-selection__choice').eq(0).text().substr(1), 'a,text2', 'text2 ok');
+        equal(p.find('.select2-selection__choice').eq(1).text().substr(1), 'abc', 'abc ok');
+        equal(p.find('.select2-selection__choice').eq(2).text().substr(1), 'd', 'd ok');
+
+
+        $input.append(new Option('a,text1', 'a,text1'));
+        $input.append(new Option('cde', 'cde'));
+
         //select new value
-        s = 'a,text1 cde'; 
+        s = 'a,text1 cde';
         text = 'a,text1-cde';
-        $input.select2('val', ['a,text1', 'cde']);
+        $input.val(['a,text1', 'cde']).trigger('change');
 
-        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');   
+        equal($input.val().join(sep), s, 'new value ok');
+        equal(p.find('.select2-selection__choice').length, 2, 'new text ok');
+        equal(p.find('.select2-selection__choice').eq(0).text().substr(1), 'a,text1', 'text1 ok');
+        equal(p.find('.select2-selection__choice').eq(1).text().substr(1), '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');             
-            
+            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',
             e = $('<a href="#" data-type="select2" data-name="select2"></a>').appendTo(fx).editable({
@@ -205,41 +215,41 @@ $(function () {
         });
 
         equal(e.text(), 'text1, text2', '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(), '1,2', 'selected value ok');        
-        equal(p.find('.select2-search-choice > div').length, 2, 'selected text ok');        
-        equal(p.find('.select2-search-choice > div').eq(0).text(), 'text1', 'text1 ok');        
-        equal(p.find('.select2-search-choice > div').eq(1).text(), 'text2', 'text2 ok');        
-        
+        equal($input.val(), '1,2', 'selected value ok');
+        equal(p.find('.select2-search-choice > div').length, 2, 'selected text ok');
+        equal(p.find('.select2-search-choice > div').eq(0).text(), 'text1', 'text1 ok');
+        equal(p.find('.select2-search-choice > div').eq(1).text(), 'text2', 'text2 ok');
+
         //select new value
-//        s = 'text1,cde'; 
+//        s = 'text1,cde';
  //       text = 'text1, cde';
         $input.select2('val', [1]);
 
-        equal($input.val(), '1', 'new value ok');        
-        equal(p.find('.select2-search-choice > div').length, 1, 'new text ok');        
-        equal(p.find('.select2-search-choice > div').eq(0).text(), 'text1', 'text1 ok');        
+        equal($input.val(), '1', 'new value ok');
+        equal(p.find('.select2-search-choice > div').length, 1, 'new text ok');
+        equal(p.find('.select2-search-choice > div').eq(0).text(), 'text1', 'text1 ok');
 
         p.find('form').submit();
-        
+
         setTimeout(function() {
             ok(!p.is(':visible'), 'popover closed');
             equal(e.data('editable').value.length, 1, 'new value ok');
-            equal(e.text(), 'text1', 'new text ok');             
-            
+            equal(e.text(), 'text1', 'new text ok');
+
             e.remove();
             start();
         }, timeout);
-     });          
- */        
-    
+     });
+ */
+
      test("local: setValue + x-editable source", function () {
         var e = $('<a href="#" data-type="select2" data-name="select2" data-value="1">test2</a>').appendTo('#qunit-fixture').editable({
                source: [{value: 1, text: 'text1'}, {value: 2, text: 'text2'}, {value: 3, text: 'text3'}]
@@ -247,12 +257,12 @@ $(function () {
 
         //autotext
         equal(e.data('editable').value, 1, 'initial value ok');
-        
+
         //setValue before open
  		e.editable('setValue', 2);
  		equal(e.data('editable').value, 2, 'value ok');
  		equal(e.text(), 'text2', 'text ok');
-        
+
         //open
         e.click();
         var p = tip(e);
@@ -262,63 +272,68 @@ $(function () {
         e.editable('setValue', 3);
         equal(e.data('editable').value, 3, 'value ok');
         equal(e.text(), 'text3', 'text ok');
-     }); 
-  
+     });
+
     asyncTest("remote: init-change-save, just url (not multiple)", function () {
         var s = 2, text = groups[s],
             newVal = 0, newText = groups[newVal],
             e = $('<a href="#" data-type="select2" data-name="select2" data-value="'+s+'">'+text+'</a>').appendTo(fx).editable({
                 source: 'groupsArr2'
             });
-        
+
+        //autotext
+        equal(e.data('editable').value, s, 'initial value ok');
+        equal(e.text(), text, 'intial text ok');
+
         e.click();
         var p = tip(e);
-        
+
         ok(p.is(':visible'), 'popover visible');
-        equal(p.find('.select2-choice span').text(), text, 'selected text correct');
-      
-        var $input = p.find('input[type="hidden"]');
+
+        var $input = p.find('select');
+
         ok($input.length, 'input exists');
-        ok($input.select2, 'select2 applied');      
-        equal($input.val(), e.data('editable').value, 'selected value correct');   
-        
-        //click to load items
-        p.find('.select2-choice').mousedown();
-        
+        ok($input.data('select2'), 'select2 applied');
+
         setTimeout(function() {
+           equal($input.val(), e.data('editable').value, 'selected value correct');
+           equal(p.find('.select2-selection').text(), text, 'selected text correct');
+
+           $input.select2('open');
+
            equal($('.select2-results li').length, groupsArr2.length, 'items loaded');
-           equal($('.select2-results .select2-highlighted > .select2-result-label').text(), text, 'highlight ok');
-       
+           equal($('.select2-results__option--highlighted').text(), text, 'highlight ok');
+
            //select new value (0)
            $('.select2-results li').eq(newVal).mouseup();
-           equal(p.find('.select2-choice span').text(), newText, 'new selected text ok');
-                       
+           equal(p.find('.select2-selection').text(), newText, 'new selected text ok');
+
            //submit
            p.find('form').submit();
-           
+
            setTimeout(function() {
                ok(!p.is(':visible'), 'popover closed');
                equal(e.data('editable').value, newVal, 'new value ok');
-               equal(e.text(), newText, 'new text ok');             
+               equal(e.text(), newText, 'new text ok');
 
                //open again
                e.click();
                p = tip(e);
-               equal(p.find('.select2-choice span').text(), newText, 'text ok on second open');
-               equal($input.val(), newVal, 'selected value ok on second open');                
-               
+               equal(p.find('.select2-selection').text(), newText, 'text ok on second open');
+               equal($input.val(), newVal, 'selected value ok on second open');
+
                //setValue in closed state
                p.find('.editable-cancel').click();
                e.editable('setValue', 1);
                equal(e.data('editable').value, 1, 'setValue: value ok');
-               equal(e.text(), groups[1], 'setValue: text ok');               
-               
+               equal(e.text(), groups[1], 'setValue: text ok');
+
                e.remove();
                start();
            }, timeout);
-        }, timeout);             
-     });  
-     
+        }, timeout);
+     });
+
     test("remote: initially empty", function () {
         var s = 2, text = groups[s],
             newVal = 0, newText = groups[newVal],
@@ -327,22 +342,22 @@ $(function () {
                 select2: {
                     placeholder: 'placeholder'
                 }
-            }); 
-            
+            });
+
         e.click();
         var p = tip(e);
-        
+
         ok(p.is(':visible'), 'popover visible');
-        equal(p.find('.select2-choice span').text(), 'placeholder', 'placeholder shown in select2');            
-    });      
-    
+        equal(p.find('.select2-selection').text(), 'placeholder', 'placeholder shown in select2');
+    });
+
     asyncTest("remote: custom id, custom text, init selection (not multiple)", function () {
         var s = 2,
             data = [
             {cid: 1, name: '111'},
             {cid: 2, name: '222'}
             ],
-            idIndex, 
+            idIndex,
             text = '222', req = 0,
             newVal = 0, newText = groups[newVal],
             e = $('<a href="#" data-type="select2" data-name="select2" data-value="'+s+'">'+text+'</a>').appendTo(fx).editable({
@@ -369,13 +384,14 @@ $(function () {
                        return e.name;
                    },
                    initSelection: function (element, callback) {
+                       console.log('initSelection');
                        return $.get('/select2id', { query: element.val() }, function (data) {
                            callback(data);
                        }, 'json');
-                   }     
+                   }
                 }
             });
-        
+
        //mocks
        $.mockjax({
            url: '/select2list',
@@ -384,8 +400,8 @@ $(function () {
                req++;
                this.responseText = data;
            }
-       }); 
-       
+       });
+
        $.mockjax({
            url: '/select2id',
            responseTime: 50,
@@ -393,56 +409,58 @@ $(function () {
                req++;
                this.responseText = data[idIndex];
            }
-       });       
-        
+       });
+
         //start
         idIndex = 1;
         e.click();
         var p = tip(e);
-        
+
+        var $input = p.find('select');
+
         ok(p.is(':visible'), 'popover visible');
-        
+
         //waiting for initSelection
         setTimeout(function() {
-            equal(p.find('.select2-choice span').text(), text, 'selected text correct'); 
-            equal(req, 1, '1 request ok'); 
-            
+            equal(p.find('.select2-selection').text(), text, 'selected text correct');
+            equal(req, 1, '1 request ok');
+
             //enter 1 symbol
-            p.find('.select2-choice').mousedown();
-            $('.select2-search .select2-input:visible').val('1').trigger('keyup-change');
-            
+            $input.select2('open');
+            $('.select2-search__field').val('1').trigger('keyup');
+
             //wait for list loading
             setTimeout(function() {
                equal($('.select2-results li').length, data.length, 'items loaded');
-               equal($('.select2-results .select2-highlighted > .select2-result-label').text(), data[0].name, 'highlight ok');
-      
+               equal($('.select2-results__option--highlighted').text(), data[1].name, 'highlight ok');
+
                //click on first
                var newVal = 1, newText = '111';
                $('.select2-results li').eq(0).mouseup();
-               equal(p.find('.select2-choice span').text(), data[0].name, 'new selected text ok');
-                           
+               equal(p.find('.select2-selection').text(), data[0].name, 'new selected text ok');
+
                //submit
                p.find('form').submit();
-               
+
                setTimeout(function() {
                    ok(!p.is(':visible'), 'popover closed');
                    equal(e.data('editable').value, newVal, 'new value ok');
-                   equal(e.text(), newText, 'new text ok');             
+                   equal(e.text(), newText, 'new text ok');
 
                    //open again
                    idIndex = 0;
                    e.click();
                    setTimeout(function() {
                        p = tip(e);
-                       var $input = p.find('input[type="hidden"]');
-                       equal(p.find('.select2-choice span').text(), newText, 'text ok on second open');
-                       equal($input.val(), newVal, 'selected value ok on second open');                
-                   
+                       var $input = p.find('select');
+                       equal(p.find('.select2-selection').text(), newText, 'text ok on second open');
+                       equal($input.val(), newVal, 'selected value ok on second open');
+
                        e.remove();
                        start();
                    }, timeout);
                }, timeout);
-            }, timeout);    
+            }, timeout);
         }, timeout);
-   });        
-});
\ No newline at end of file
+   });
+});