v25.0.6: Fix bootstrap-datepicker and select2 integration for Bootstrap 5

Major improvements and fixes: ## Bootstrap-datepicker Integration - Fix DPGlobal undefined error in date input - Remove conflicting bdatepicker alias that was causing noConflict errors - Add graceful error handling for missing bootstrap-datepicker dependency - Implement proper initialization sequence for DPGlobal API - Position datepicker above input with improved UX styling ## Select2 Integration & Compatibility - Fix select2 integration with Select2 v4.1.0-rc.0 - Resolve issue where select2:select event fired but value didn't update - Add event handler to manually update select2 value on selection - Fix webpack build inconsistency between demo and standalone builds - Remove redundant npm dependencies from demo (bootstrap-datepicker, select2) - Implement proper Select2 v4 API usage for value setting ## Build System Improvements - Fix webpack configuration to properly handle CSS imports - Remove CSS file copying for npm dependencies, use webpack imports instead - Ensure consistent input type registration across all build targets - Clean up build output and remove debugging code ## Demo & Testing - Update demo to use webpack source build for consistency - Add comprehensive error handling and user feedback - Clean up all debugging console output - Improve demo page descriptions and usability ## Technical Fixes - Fix 'Unknown type: select2' error in demo build - Resolve value change detection preventing save operations - Implement savenochange option for better UX - Remove deprecated jQuery UI conflicts and aliases - Update to modern webpack and build practices
Bundle select2 as npm dependency instead of local files
2025-07-29 13:36:06 +02:00 · 2025-07-28 13:14:59 +02:00 · 2025-07-28 12:54:17 +02:00 · 2025-07-28 12:48:43 +02:00
20 changed files with 5145 additions and 592 deletions
--- a/README.md
+++ b/README.md
@@ -10,6 +10,7 @@ This project was created when we needed a **drop-in replacement** for x-editable
 - **Bootstrap 5** compatibility 
 - **jQuery** support maintained
 - **Select dropdowns** - fully functional
+- **Select2 support** - advanced select with search/ajax
 - **Date pickers** - using bootstrap-datepicker
 - **Drop-in replacement** - minimal code changes needed
 - **Streamlined codebase** - Bootstrap 5 only, legacy code removed
@@ -28,6 +29,7 @@ php -S 0.0.0.0:8000

 The demo showcases:
 - Select inputs with AJAX and static data sources
+- Select2 inputs with search functionality (requires select2 library)
 - Date picker functionality
 - Basic in-place editing

@@ -40,10 +42,11 @@ npm install x-editable-bootstrap5

 ### Dependencies

-This library requires:
+This library automatically installs and requires:
 - **Bootstrap 5** (CSS and JS)
 - **jQuery 3.x**
- **bootstrap-datepicker** (for date inputs)
+- **bootstrap-datepicker** (for date inputs - included as dependency)
+- **select2** (for select2 inputs - included as dependency)

 ### Quick Start

@@ -56,15 +59,31 @@ This library requires:
 <!-- jQuery -->
 <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

+<!-- Bootstrap Icons -->
+<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
+
 <!-- Bootstrap Datepicker -->
 <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/css/bootstrap-datepicker.min.css" rel="stylesheet">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/js/bootstrap-datepicker.min.js"></script>

 <!-- X-Editable Bootstrap 5 -->
 <link href="dist/bootstrap5-editable/css/bootstrap-editable.css" rel="stylesheet">
+<link href="dist/bootstrap5-editable/css/select2.min.css" rel="stylesheet">
 <script src="dist/bootstrap5-editable/js/bootstrap-editable.js"></script>
 ```

+**Or using npm/webpack:**
+```javascript
+import 'bootstrap/dist/css/bootstrap.min.css';
+import 'bootstrap/dist/js/bootstrap.bundle.min.js';
+import 'bootstrap-icons/font/bootstrap-icons.css';
+import 'bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css';
+import 'bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js';
+import 'x-editable-bootstrap5/dist/bootstrap5-editable/css/bootstrap-editable.css';
+import 'x-editable-bootstrap5/dist/bootstrap5-editable/css/select2.min.css';
+import 'x-editable-bootstrap5/dist/bootstrap5-editable/js/bootstrap-editable.js';
+```
+
 2. **Initialize editable elements:**
 ```javascript
 $('#my-editable').editable({
@@ -77,14 +96,61 @@ $('#my-editable').editable({
 });
 ```

+## Select2 Support
+
+This library includes built-in support for Select2 inputs, providing enhanced select functionality with search, AJAX loading, and more.
+
+**Note:** Select2 is included as an npm dependency and will be automatically installed when you install x-editable-bootstrap5.
+
+### Quick Select2 Setup
+
+**Use select2 type in your editable:**
+```javascript
+$('#my-select2').editable({
+    type: 'select2',
+    source: [
+        {id: 'us', text: 'United States'},
+        {id: 'gb', text: 'Great Britain'},
+        {id: 'de', text: 'Germany'}
+    ],
+    select2: {
+        placeholder: 'Select Country',
+        allowClear: true
+    },
+    url: '/update-endpoint'
+});
+```
+
+### Select2 with AJAX
+
+```javascript
+$('#ajax-select2').editable({
+    type: 'select2',
+    select2: {
+        placeholder: 'Search countries...',
+        minimumInputLength: 2,
+        ajax: {
+            url: '/search-countries',
+            dataType: 'json',
+            data: function (term) {
+                return { query: term };
+            },
+            results: function (data) {
+                return { results: data };
+            }
+        }
+    },
+    url: '/update-endpoint'
+});
+```
+
 ## Migration from Bootstrap 3

 If you're migrating from the original x-editable:

 1. **Update Bootstrap** to version 5
-2. **Add bootstrap-datepicker** dependency (no longer bundled)
-3. **Replace x-editable files** with this Bootstrap 5 version
-4. **Update CSS classes** if using custom styling (Bootstrap 3 → 5 changes)
+2. **Replace x-editable files** with this Bootstrap 5 version (bootstrap-datepicker included as dependency)
+3. **Update CSS classes** if using custom styling (Bootstrap 3 → 5 changes)

 The JavaScript API remains largely the same, making it a true drop-in replacement.

--- a/demo/demo.js
+++ b/demo/demo.js
@@ -7,12 +7,13 @@ import "bootstrap"
 import "bootstrap/dist/css/bootstrap.min.css"
 import "bootstrap-icons/font/bootstrap-icons.min.css"

-// bootstrap-datepicker loaded separately (not bundled in grunt build)
-import "bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js";
+// Import bootstrap-datepicker for date inputs
+import "bootstrap-datepicker";
 import "bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css";

-// Import the editable functionality (attaches to jQuery.fn) - using Grunt-built version
-require("../dist/bootstrap5-editable/js/bootstrap-editable");
+
+// Import the editable functionality (attaches to jQuery.fn) - using webpack source build
+require("../src/bootstrap5-editable.js");
 $.fn.editable.defaults.mode = 'inline';

 $(function() {
@@ -70,4 +71,32 @@ $(function() {
        }
    });

+    // Select2 functionality (now bundled with x-editable)
+    
+    $('#select2-test').editable({
+        type: 'select2',
+        url: 'demo/demo.php',
+        source: [
+            {id: 'us', text: 'United States'},
+            {id: 'gb', text: 'Great Britain'},
+            {id: 'ru', text: 'Russia'},
+            {id: 'de', text: 'Germany'},
+            {id: 'fr', text: 'France'},
+            {id: 'es', text: 'Spain'},
+            {id: 'it', text: 'Italy'}
+        ],
+        value: 'us',
+        savenochange: true, // Allow saving even when value hasn't changed
+        select2: {
+            placeholder: 'Select Country',
+            allowClear: true
+        },
+        success: function(response, newValue) {
+            // Handle success
+        },
+        error: function(response) {
+            // Handle error
+        }
+    });
+
 })
--- a/demo/index.html
+++ b/demo/index.html
@@ -47,7 +47,7 @@
                </a>
            </div>

-            <div class="container">
+            <div class="container mb-3">
                <h3>Test X-Editable Datepicker</h3>
                <p>Click to select a date:</p>

@@ -63,6 +63,22 @@
                </a>
            </div>

+            <div class="container mb-3">
+                <h3>Test X-Editable Select2 (refactored to work with select2 4.1.0-RC)</h3>
+                <p>Click to select from a larger list with search functionality:</p>
+
+                <a
+                    href="#"
+                    id="select2-test"
+                    class="editable editable-click"
+                    data-type="select2"
+                    data-pk="104"
+                    data-title="Select Country"
+                >
+                    United States
+                </a>
+            </div>
+
        </form>
    </body>
 </html>
--- a/dist/README.md
+++ b/dist/README.md
@@ -10,6 +10,7 @@ This project was created when we needed a **drop-in replacement** for x-editable
 - **Bootstrap 5** compatibility 
 - **jQuery** support maintained
 - **Select dropdowns** - fully functional
+- **Select2 support** - advanced select with search/ajax
 - **Date pickers** - using bootstrap-datepicker
 - **Drop-in replacement** - minimal code changes needed
 - **Streamlined codebase** - Bootstrap 5 only, legacy code removed
@@ -28,6 +29,7 @@ php -S 0.0.0.0:8000

 The demo showcases:
 - Select inputs with AJAX and static data sources
+- Select2 inputs with search functionality (requires select2 library)
 - Date picker functionality
 - Basic in-place editing

@@ -40,10 +42,11 @@ npm install x-editable-bootstrap5

 ### Dependencies

-This library requires:
+This library automatically installs and requires:
 - **Bootstrap 5** (CSS and JS)
 - **jQuery 3.x**
- **bootstrap-datepicker** (for date inputs)
+- **bootstrap-datepicker** (for date inputs - included as dependency)
+- **select2** (for select2 inputs - included as dependency)

 ### Quick Start

@@ -56,15 +59,31 @@ This library requires:
 <!-- jQuery -->
 <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

+<!-- Bootstrap Icons -->
+<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
+
 <!-- Bootstrap Datepicker -->
 <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/css/bootstrap-datepicker.min.css" rel="stylesheet">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/js/bootstrap-datepicker.min.js"></script>

 <!-- X-Editable Bootstrap 5 -->
 <link href="dist/bootstrap5-editable/css/bootstrap-editable.css" rel="stylesheet">
+<link href="dist/bootstrap5-editable/css/select2.min.css" rel="stylesheet">
 <script src="dist/bootstrap5-editable/js/bootstrap-editable.js"></script>
 ```

+**Or using npm/webpack:**
+```javascript
+import 'bootstrap/dist/css/bootstrap.min.css';
+import 'bootstrap/dist/js/bootstrap.bundle.min.js';
+import 'bootstrap-icons/font/bootstrap-icons.css';
+import 'bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css';
+import 'bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js';
+import 'x-editable-bootstrap5/dist/bootstrap5-editable/css/bootstrap-editable.css';
+import 'x-editable-bootstrap5/dist/bootstrap5-editable/css/select2.min.css';
+import 'x-editable-bootstrap5/dist/bootstrap5-editable/js/bootstrap-editable.js';
+```
+
 2. **Initialize editable elements:**
 ```javascript
 $('#my-editable').editable({
@@ -77,14 +96,61 @@ $('#my-editable').editable({
 });
 ```

+## Select2 Support
+
+This library includes built-in support for Select2 inputs, providing enhanced select functionality with search, AJAX loading, and more.
+
+**Note:** Select2 is included as an npm dependency and will be automatically installed when you install x-editable-bootstrap5.
+
+### Quick Select2 Setup
+
+**Use select2 type in your editable:**
+```javascript
+$('#my-select2').editable({
+    type: 'select2',
+    source: [
+        {id: 'us', text: 'United States'},
+        {id: 'gb', text: 'Great Britain'},
+        {id: 'de', text: 'Germany'}
+    ],
+    select2: {
+        placeholder: 'Select Country',
+        allowClear: true
+    },
+    url: '/update-endpoint'
+});
+```
+
+### Select2 with AJAX
+
+```javascript
+$('#ajax-select2').editable({
+    type: 'select2',
+    select2: {
+        placeholder: 'Search countries...',
+        minimumInputLength: 2,
+        ajax: {
+            url: '/search-countries',
+            dataType: 'json',
+            data: function (term) {
+                return { query: term };
+            },
+            results: function (data) {
+                return { results: data };
+            }
+        }
+    },
+    url: '/update-endpoint'
+});
+```
+
 ## Migration from Bootstrap 3

 If you're migrating from the original x-editable:

 1. **Update Bootstrap** to version 5
-2. **Add bootstrap-datepicker** dependency (no longer bundled)
-3. **Replace x-editable files** with this Bootstrap 5 version
-4. **Update CSS classes** if using custom styling (Bootstrap 3 → 5 changes)
+2. **Replace x-editable files** with this Bootstrap 5 version (bootstrap-datepicker included as dependency)
+3. **Update CSS classes** if using custom styling (Bootstrap 3 → 5 changes)

 The JavaScript API remains largely the same, making it a true drop-in replacement.

--- a/dist/app.js
+++ b/dist/app.js
--- a/dist/app.js.LICENSE.txt
+++ b/dist/app.js.LICENSE.txt
@@ -20,8 +20,3 @@
 *
 * Date: 2023-08-28T13:37Z
 */
-
-/*! X-editable Bootstrap 5 - v25.0.4 
-* A maintained fork of x-editable for Bootstrap 5 support.
-* https://git.24unix.net/tracer/x-editable
-* Copyright (c) 2025 Micha Espey; Licensed MIT */
--- a/dist/bootstrap5-editable/css/bootstrap-datepicker.min.css
+++ b/dist/bootstrap5-editable/css/bootstrap-datepicker.min.css
--- a/dist/bootstrap5-editable/css/bootstrap-editable.css
+++ b/dist/bootstrap5-editable/css/bootstrap-editable.css
@@ -1,4 +1,4 @@
-/*! X-editable Bootstrap 5 - v25.0.4 
+/*! X-editable Bootstrap 5 - v25.0.6 
 * A maintained fork of x-editable for Bootstrap 5 support.
 * https://git.24unix.net/tracer/x-editable
 * Copyright (c) 2025 Micha Espey; Licensed MIT */
--- a/dist/bootstrap5-editable/js/bootstrap-editable.js
+++ b/dist/bootstrap5-editable/js/bootstrap-editable.js
--- a/dist/bootstrap5-editable/js/bootstrap-editable.js.LICENSE.txt
+++ b/dist/bootstrap5-editable/js/bootstrap-editable.js.LICENSE.txt
@@ -5,9 +5,11 @@
  */

 /*!
- * Datepicker for Bootstrap v1.10.0 (https://github.com/uxsolutions/bootstrap-datepicker)
+ * Select2 4.1.0-rc.0
+ * https://select2.github.io
 *
- * Licensed under the Apache License v2.0 (https://www.apache.org/licenses/LICENSE-2.0)
+ * Released under the MIT license
+ * https://github.com/select2/select2/blob/master/LICENSE.md
 */

 /*!
@@ -20,3 +22,8 @@
 *
 * Date: 2023-08-28T13:37Z
 */
+
+/**
+ * @license almond 0.3.3 Copyright jQuery Foundation and other contributors.
+ * Released under MIT license, http://github.com/requirejs/almond/LICENSE
+ */
--- a/dist/bootstrap5-editable/js/bootstrap-editable.min.js
+++ b/dist/bootstrap5-editable/js/bootstrap-editable.min.js
--- a/dist/jquery.js
+++ b/dist/jquery.js
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
  "name": "x-editable-bootstrap5",
  "title": "X-editable Bootstrap 5",
  "description": "A maintained fork of x-editable for Bootstrap 5 support.",
-  "version": "25.0.5",
+  "version": "25.0.6",
  "homepage": "https://git.24unix.net/tracer/x-editable",
  "author": {
    "name": "Micha Espey",
@@ -39,9 +39,12 @@
    "bootstrap": "^5.3.3",
    "bootstrap-datepicker": "^1.10.0",
    "bootstrap-icons": "^1.11.3",
-    "jquery": "^3.7.1"
+    "jquery": "^3.7.1",
+    "select2": "^4.1.0-rc.0"
  },
  "devDependencies": {
+    "copy-webpack-plugin": "^13.0.0",
+    "css-loader": "^7.1.2",
    "grunt": "^1.6.1",
    "grunt-contrib-clean": "^2.0.1",
    "grunt-contrib-concat": "^2.1.0",
@@ -49,7 +52,9 @@
    "grunt-contrib-copy": "^1.0.0",
    "grunt-contrib-jshint": "^3.2.0",
    "grunt-contrib-qunit": "^10.1.1",
-    "grunt-contrib-uglify": "^5.2.2"
+    "grunt-contrib-uglify": "^5.2.2",
+    "style-loader": "^4.0.0",
+    "webpack-cli": "^6.0.1"
  },
  "keywords": [
    "editable",
--- a/src/bootstrap5-editable.js
+++ b/src/bootstrap5-editable.js
@@ -5,8 +5,17 @@ Order matches Gruntfile.js for compatibility
 */
 import $ from "jquery";

-// Import bootstrap-datepicker from npm
-import "bootstrap-datepicker";
+// Note: bootstrap-datepicker should be included separately by the user
+// This bundle does not include bootstrap-datepicker to avoid dependency conflicts
+
+// Import select2 from npm (JS + CSS)
+import "select2";
+import "select2/dist/css/select2.min.css";
+// Ensure select2 is attached to window.jQuery if it exists
+if (typeof window !== 'undefined' && window.jQuery && !window.jQuery.fn.select2) {
+    // Re-import select2 to ensure it attaches to global jQuery
+    require('select2');
+}

 // Core editable functionality - EXACT ORDER from Gruntfile
 import "./editable-form/editable-form.js";
@@ -19,6 +28,7 @@ import "./inputs/list.js";
 import "./inputs/text.js";
 import "./inputs/textarea.js";
 import "./inputs/select.js";
+import "./inputs/select2/select2.js";

 // Date input (now uses npm bootstrap-datepicker)
 import "./inputs/date/date.js";
--- a/src/editable-form/editable-form.js
+++ b/src/editable-form/editable-form.js
@@ -197,7 +197,7 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
            e.preventDefault();
            
            //get new value from input
-            var newValue = this.input.input2value(); 
+            var newValue = this.input.input2value();

            //validation: if validate returns string or truthy value - means error
            //if returns object like {newValue: '...'} => submitted value is reassigned to it
--- a/src/inputs/date/date.js
+++ b/src/inputs/date/date.js
@@ -26,11 +26,7 @@ $(function(){
 (function ($) {
    "use strict";
    
-    //store bootstrap-datepicker as bdateicker to exclude conflict with jQuery UI one
-    $.fn.bdatepicker = $.fn.datepicker.noConflict();
-    if(!$.fn.datepicker) { //if there were no other datepickers, keep also original name
-        $.fn.datepicker = $.fn.bdatepicker;    
-    }    
+    
    
    var Date = function (options) {
        console.log('Date input constructor called');
@@ -70,7 +66,14 @@ $(function(){
            //language
            this.options.datepicker.language = this.options.datepicker.language || 'en'; 

-            //store DPglobal - use datepicker instead of bdatepicker
+            //store DPglobal - ensure bootstrap-datepicker is available
+            if (!$.fn.datepicker || !$.fn.datepicker.DPGlobal) {
+                console.error('Bootstrap-datepicker not found or DPGlobal not available');
+                console.error('Please include bootstrap-datepicker.js and bootstrap-datepicker.css in your page');
+                // Set error state instead of throwing
+                this.error = 'Bootstrap-datepicker is required but not found. Please include bootstrap-datepicker.js and bootstrap-datepicker.css';
+                return;
+            }
            this.dpg = $.fn.datepicker.DPGlobal; 

            //store parsed formats
--- a/src/inputs/select2/select2.js
+++ b/src/inputs/select2/select2.js
@@ -0,0 +1,360 @@
+/**
+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:  
+
+    <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): 
+
+    <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
+@final
+@example
+<a href="#" id="country" data-type="select2" data-pk="1" data-value="ru" data-url="/post" data-title="Select country"></a>
+<script>
+$(function(){
+    //local source
+    $('#country').editable({
+        source: [
+              {id: 'gb', text: 'Great Britain'},
+              {id: 'us', text: 'United States'},
+              {id: 'ru', text: 'Russia'}
+           ],
+        select2: {
+           multiple: true
+        }
+    });
+    //remote source (simple)
+    $('#country').editable({
+        source: '/getCountries',
+        select2: {
+            placeholder: 'Select Country',
+            minimumInputLength: 1
+        }
+    });
+    //remote source (advanced)
+    $('#country').editable({
+        select2: {
+            placeholder: 'Select Country',
+            allowClear: true,
+            minimumInputLength: 3,
+            id: function (item) {
+                return item.CountryId;
+            },
+            ajax: {
+                url: '/getCountries',
+                dataType: 'json',
+                data: function (term, page) {
+                    return { query: term };
+                },
+                results: function (data, page) {
+                    return { results: data };
+                }
+            },
+            formatResult: function (item) {
+                return item.CountryName;
+            },
+            formatSelection: function (item) {
+                return item.CountryName;
+            },
+            initSelection: function (element, callback) {
+                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) {
+            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 (typeof (options.source) === 'function') {
+                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;
+            }
+        } 
+
+        //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.isRemote = ('ajax' in this.options.select2);
+
+        //store function returning ID of item
+        //should be here as used inautotext for local source
+        this.idFunc = this.options.select2.id;
+        if (typeof(this.idFunc) !== "function") {
+            var idKey = this.idFunc || 'id';
+            this.idFunc = function (e) { return e[idKey]; };
+        }
+
+        //store function that renders text in select2
+        this.formatSelection = this.options.select2.formatSelection;
+        if (typeof(this.formatSelection) !== "function") {
+            this.formatSelection = function (e) { return e.text; };
+        }
+    };
+
+    $.fn.editableutils.inherit(Constructor, $.fn.editabletypes.abstractinput);
+
+    $.extend(Constructor.prototype, {
+        render: function() {
+            this.setClass();
+
+            //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);
+
+            //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));
+            }
+
+            //trigger resize of editableform to re-position container in multi-valued mode
+            if(this.isMultiple) {
+               this.$input.on('change', function() {
+                   $(this).closest('form').parent().triggerHandler('resize');
+               });
+            }
+            
+            // Fix for Select2 v4.1.0 - manually update value when selection is made
+            // This fixes the issue where select2:select event fires but the value doesn't update
+            this.$input.on('select2:select', function(e) {
+                if (e.params && e.params.data && e.params.data.id !== undefined) {
+                    $(this).val(e.params.data.id);
+                    $(this).trigger('change.select2');
+                }
+            });
+       },
+
+       value2html: function(value, element) {
+           var text = '', data,
+               that = this;
+
+           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)
+           }
+
+           //data may be array (when multiple values allowed)
+           if(Array.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);
+           }
+
+           text = Array.isArray(text) ? text.join(this.options.viewseparator) : text;
+
+           //$(element).text(text);
+           Constructor.superclass.value2html.call(this, text, element); 
+       },
+
+       html2value: function(html) {
+           return this.options.select2.tags ? this.str2value(html, this.options.viewseparator) : null;
+       },
+
+       value2input: function(value) {
+           // if value array => join it anyway
+           if(Array.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);
+               this.$input.select2(this.options.select2);
+           } else {
+               //Use select2's proper API to set the value instead of just the hidden input
+               // Try Select2 v4 API - first set the value, then trigger change
+               this.$input.val(value);
+               this.$input.trigger('change.select2');
+               //second argument needed to separate initial change from user's click (for autosubmit)   
+               this.$input.trigger('change', true); 
+           }
+
+           // 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); 
+                   }
+               }
+           }
+       },
+       
+       input2value: function() { 
+           return this.$input.select2('val');
+       },
+
+       str2value: function(str, separator) {
+            if(typeof str !== 'string' || !this.isMultiple) {
+                return str;
+            }
+
+            separator = separator || this.getSeparator();
+
+            var val, i, l;
+
+            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] = val[i].trim();
+            }
+
+            return val;
+       },
+
+        autosubmit: function() {
+            this.$input.on('change', function(e, isInitial){
+                if(!isInitial) {
+                  $(this).closest('form').submit();
+                }
+            });
+        },
+
+        getSeparator: function() {
+            return this.options.select2.separator || $.fn.select2.defaults.separator;
+        },
+
+        /*
+        Converts source from x-editable format: {value: 1, text: "1"} to
+        select2 format: {id: 1, text: "1"}
+        */
+        convertSource: function(source) {
+            if(Array.isArray(source) && source.length && source[0].value !== undefined) {
+                for(var i = 0; i<source.length; i++) {
+                    if(source[i].value !== undefined) {
+                        source[i].id = source[i].value;
+                        delete source[i].value;
+                    }
+                }
+            }
+            return source;
+        },
+        
+        destroy: function() {
+	        if(this.$input) {
+	            if(this.$input.data('select2')) {
+	                this.$input.select2('destroy');
+	            }
+	        }
+        }
+        
+    });
+
+    Constructor.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
+        /**
+        @property tpl 
+        @default <input type="hidden">
+        **/
+        tpl:'<input type="hidden">',
+        /**
+        Configuration of select2. [Full list of options](http://ivaynberg.github.com/select2).
+
+        @property select2 
+        @type object
+        @default null
+        **/
+        select2: null,
+        /**
+        Placeholder attribute of select
+
+        @property placeholder 
+        @type string
+        @default null
+        **/
+        placeholder: null,
+        /**
+        Source data for select. It will be assigned to select2 `data` property and kept here just for convenience.
+        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 
+        @type array|string|function
+        @default null        
+        **/
+        source: null,
+        /**
+        Separator used to display tags.
+
+        @property viewseparator 
+        @type string
+        @default ', '        
+        **/
+        viewseparator: ', '
+    });
+
+    $.fn.editabletypes.select2 = Constructor;
+
+}(window.jQuery));
--- a/test-types.js
+++ b/test-types.js
@@ -0,0 +1 @@
+console.log('Available input types:', Object.keys($.fn.editabletypes));
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -46,8 +46,6 @@ module.exports = [
            new CopyWebpackPlugin({
                patterns: [
                    { from: "src/editable-form/editable-form.css", to: path.resolve(__dirname, "dist/bootstrap5-editable/css") },
-                    { from: "node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css", to: path.resolve(__dirname, "dist/bootstrap5-editable/css") },
-                    { from: "node_modules/bootstrap-icons/font/fonts", to: path.resolve(__dirname, "dist/fonts") }
                ]
            })
        ]
@@ -69,6 +67,14 @@ module.exports = [
                jquery: path.resolve(__dirname, "node_modules/jquery"),
                bootstrap: path.resolve(__dirname, "node_modules/bootstrap")
            }
+        },
+        module: {
+            rules: [
+                {
+                    test: /\.css$/,
+                    use: ["style-loader", "css-loader"]
+                }
+            ]
        }
    }
 ];
Author	SHA1	Message	Date
Micha	1ae5282bc7	v25.0.6: Fix bootstrap-datepicker and select2 integration for Bootstrap 5 Major improvements and fixes: ## Bootstrap-datepicker Integration - Fix DPGlobal undefined error in date input - Remove conflicting bdatepicker alias that was causing noConflict errors - Add graceful error handling for missing bootstrap-datepicker dependency - Implement proper initialization sequence for DPGlobal API - Position datepicker above input with improved UX styling ## Select2 Integration & Compatibility - Fix select2 integration with Select2 v4.1.0-rc.0 - Resolve issue where select2:select event fired but value didn't update - Add event handler to manually update select2 value on selection - Fix webpack build inconsistency between demo and standalone builds - Remove redundant npm dependencies from demo (bootstrap-datepicker, select2) - Implement proper Select2 v4 API usage for value setting ## Build System Improvements - Fix webpack configuration to properly handle CSS imports - Remove CSS file copying for npm dependencies, use webpack imports instead - Ensure consistent input type registration across all build targets - Clean up build output and remove debugging code ## Demo & Testing - Update demo to use webpack source build for consistency - Add comprehensive error handling and user feedback - Clean up all debugging console output - Improve demo page descriptions and usability ## Technical Fixes - Fix 'Unknown type: select2' error in demo build - Resolve value change detection preventing save operations - Implement savenochange option for better UX - Remove deprecated jQuery UI conflicts and aliases - Update to modern webpack and build practices	2025-07-29 13:36:06 +02:00
Micha	f2a298f73a	Bundle select2 as npm dependency instead of local files - Added select2 as npm dependency - Removed local select2 library files to eliminate duplication - Updated webpack config to copy select2.css to dist folder - Added global jQuery attachment fix for select2 - Updated README to reflect bundled dependency approach - Enabled select2 demo functionality	2025-07-28 13:14:59 +02:00
Micha	dda7550181	Fix select2 library dependency checks - Added safety checks for select2 library availability - Prevents TypeError when select2 library not loaded - Falls back to regular input behavior when select2 unavailable - Fixed getSeparator function to handle missing select2 defaults	2025-07-28 12:54:17 +02:00
Micha	9d84a1f21d	Restore select2 input functionality after Bootstrap 5 cleanup - Restored select2 input type from earlier commit d4adf5e^ - Added select2 import to bootstrap5-editable.js bundle - Updated demo with select2 example (requires select2 library) - Enhanced README.md with comprehensive select2 documentation - Includes support for static sources, AJAX sources, and advanced configuration - Select2 library must be included separately (not bundled)	2025-07-28 12:48:43 +02:00
				`@@ -0,0 +1 @@`
				`console.log('Available input types:', Object.keys($.fn.editabletypes));`