v25.0.7: Fix distribution file dependencies and production click handler issues

## Major Fix - Production Distribution Dependencies
- Fix missing click handlers in production by ensuring proper dependency management
- Add select2 to Gruntfile.js common inputs to include it in built distribution
- Resolve 'this.$input.select2 is not a function' error in production builds
- Update demo to include select2 and bootstrap-datepicker as separate dependencies when using built files

## Dependencies & Usage
- Built distribution files now include select2 input type in bootstrap-editable.min.js
- Users must include select2 and bootstrap-datepicker separately when using built files:
  - import 'select2' and 'select2/dist/css/select2.min.css'
  - import 'bootstrap-datepicker' and 'bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css'
- This matches standard JavaScript library dependency patterns

## Technical Details
- Root cause: JavaScript cascade failure when select2 dependency was missing
- Missing select2 prevented entire x-editable initialization, breaking click handlers
- Now both webpack source build and Grunt distribution include same input types
- Maintains backward compatibility while fixing production deployment issues

## Fixes Production Issues
- ✅ Click handlers now properly attach in production
- ✅ Form submission logic works correctly
- ✅ All input types functional (text, select, select2, date, etc.)
- ✅ Proper event binding and library initialization
- ✅ No more 'Unknown type: select2' errors

.gitignore

@@ -1,3 +1,10 @@
 node_modules
 test/instrumented/
-*.nupkg
+*.nupkg
+dist/fonts/
+dist/app.js
+dist/app.js.map
+dist/app.js.LICENSE.txt
+dist/jquery.js
+dist/jquery.js.map
+dist/jquery.js.LICENSE.txt

.idea/dictionaries/project.xml

@@ -0,0 +1,7 @@
+<component name="ProjectDictionaryState">
+  <dictionary name="project">
+    <words>
+      <w>viewformat</w>
+    </words>
+  </dictionary>
+</component>

.npmignore

@@ -0,0 +1,25 @@
+# Development files
+demo/
+test/
+src/
+webpack.config.js
+Gruntfile.js
+
+# IDE files
+.idea/
+.claude/
+
+# Temporary files
+node_modules/
+*.log
+
+# Webpack dev files
+dist/app.js
+dist/app.js.*
+dist/jquery.js
+dist/jquery.js.*
+
+# Legacy files
+Package.nuspec
+bower.json
+composer.json

Gruntfile.js

@@ -34,7 +34,8 @@ function getFiles() {
         inputs+'list.js',
         inputs+'text.js',
         inputs+'textarea.js',
-        inputs+'select.js',    
+        inputs+'select.js',
+        inputs+'select2/select2.js',    
         inputs+'checklist.js',
         inputs+'html5types.js'
     ]; 

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,17 +29,24 @@ 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
 
 ## Installation
 
+### Via npm
+```bash
+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
 
@@ -51,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({
@@ -72,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.
 
@@ -98,6 +169,16 @@ grunt build
 npx webpack --mode=development
 ```
 
+## Repository
+
+**Main Repository:** [git.24unix.net/tracer/x-editable-bs5](https://git.24unix.net/tracer/x-editable-bs5)
+
+**Mirrors:**
+- GitHub: [github.com/24unix/x-editable-bs5](https://github.com/24unix/x-editable-bs5)
+- GitLab: [gitlab.com/24unix/x-editable-bs5](https://gitlab.com/24unix/x-editable-bs5)
+
+Development happens on the main repository at git.24unix.net, with mirrors automatically synced to GitHub and GitLab.
+
 ## License
 
 This project maintains the same MIT license as the original x-editable project.

demo/demo.js

@@ -7,12 +7,18 @@ 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 built distribution
+// When using built files, you need to include select2 separately for select2 inputs
+import "select2";
+import "select2/dist/css/select2.min.css";
+import '../dist/bootstrap5-editable/js/bootstrap-editable.min.js'
+import '../dist/bootstrap5-editable/css/bootstrap-editable.css'
+
 $.fn.editable.defaults.mode = 'inline';
 
 $(function() {
@@ -50,7 +56,7 @@ $(function() {
     });
 
     const initialDateValue = new Date().toISOString().split('T')[0];
-    
+
     $('#datepicker').editable({
         type: 'date',
         url: 'demo/demo.php',  // URL to send the POST request
@@ -70,4 +76,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
+        }
+    });
+
 })

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>

dist/README.md

@@ -1,17 +1,189 @@
 # X-Editable (Bootstrap 5 Fork)
 
-This project is a fork of [vitalets/x-editable](https://github.com/vitalets/x-editable), adapted to work with **Bootstrap 5** while maintaining compatibility with jQuery.
+A drop-in replacement for legacy Bootstrap 3 x-editable projects, modernized for **Bootstrap 5** with jQuery support.
 
 ## Why This Fork?
-The original **x-editable** library was designed for Bootstrap 3 and has not been actively maintained. This fork modernizes the codebase and updates it to support:
 
-- **Bootstrap 5** 
-- **Bootstrap Icons** (replacing Glyphicons)
+This project was created when we needed a **drop-in replacement** for x-editable in a legacy Bootstrap 3 project. The original [vitalets/x-editable](https://github.com/vitalets/x-editable) library has not been actively maintained and doesn't support Bootstrap 5.
 
-NOTE: This repo has not yet been completely tested and is not available via NPM right now!
+**Key Features:**
+- **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
 
-Later: 
-### Using npm:
-```sh
+## Demo
+
+The `/demo` folder contains working examples of the library in action.
+
+**To run the demo:**
+```bash
+# In the project root directory
+php -S 0.0.0.0:8000
+
+# Then visit: http://localhost:8000/demo/
+```
+
+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
+
+## Installation
+
+### Via npm
+```bash
 npm install x-editable-bootstrap5
 ```
+
+### Dependencies
+
+This library automatically installs and requires:
+- **Bootstrap 5** (CSS and JS)
+- **jQuery 3.x**
+- **bootstrap-datepicker** (for date inputs - included as dependency)
+- **select2** (for select2 inputs - included as dependency)
+
+### Quick Start
+
+1. **Include the CSS and JS files:**
+```html
+<!-- Bootstrap 5 -->
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+
+<!-- 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({
+    type: 'select',
+    source: [
+        {value: 1, text: 'Option 1'},
+        {value: 2, text: 'Option 2'}
+    ],
+    url: '/update-endpoint'
+});
+```
+
+## 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. **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.
+
+## Build
+
+To build the library from source:
+
+```bash
+# Install dependencies
+npm install
+
+# Build with Grunt
+grunt build
+
+# Or build with webpack for demo
+npx webpack --mode=development
+```
+
+## Repository
+
+**Main Repository:** [git.24unix.net/tracer/x-editable-bs5](https://git.24unix.net/tracer/x-editable-bs5)
+
+**Mirrors:**
+- GitHub: [github.com/24unix/x-editable-bs5](https://github.com/24unix/x-editable-bs5)
+- GitLab: [gitlab.com/24unix/x-editable-bs5](https://gitlab.com/24unix/x-editable-bs5)
+
+Development happens on the main repository at git.24unix.net, with mirrors automatically synced to GitHub and GitLab.
+
+## License
+
+This project maintains the same MIT license as the original x-editable project.
+
+## Credits
+
+- Original [x-editable](https://github.com/vitalets/x-editable) by [Vitaliy Potapov](https://github.com/vitalets)
+- Bootstrap 5 modernization and maintenance by this fork

dist/app.js.LICENSE.txt

@@ -1,322 +0,0 @@
-/*!
-  * Bootstrap v5.3.3 (https://getbootstrap.com/)
-  * Copyright 2011-2024 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
-  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
-  */
-
-/*!
- * Datepicker for Bootstrap v1.10.0 (https://github.com/uxsolutions/bootstrap-datepicker)
- *
- * Licensed under the Apache License v2.0 (https://www.apache.org/licenses/LICENSE-2.0)
- */
-
-/*!
- * jQuery JavaScript Library v3.7.1
- * https://jquery.com/
- *
- * Copyright OpenJS Foundation and other contributors
- * Released under the MIT license
- * https://jquery.org/license
- *
- * Date: 2023-08-28T13:37Z
- */
-
-/*!****************************!*\
-  !*** ./src/inputs/list.js ***!
-  \****************************/
-
-/*!****************************!*\
-  !*** ./src/inputs/text.js ***!
-  \****************************/
-
-/*!******************************!*\
-  !*** ./src/inputs/select.js ***!
-  \******************************/
-
-/*!********************************!*\
-  !*** ./src/inputs/abstract.js ***!
-  \********************************/
-
-/*!********************************!*\
-  !*** ./src/inputs/textarea.js ***!
-  \********************************/
-
-/*!*********************************!*\
-  !*** ./src/inputs/date/date.js ***!
-  \*********************************/
-
-/*!************************************!*\
-  !*** ./src/bootstrap5-editable.js ***!
-  \************************************/
-
-/*!**************************************!*\
-  !*** ./src/inputs/date/datefield.js ***!
-  \**************************************/
-
-/*!*****************************************!*\
-  !*** ./src/element/editable-element.js ***!
-  \*****************************************/
-
-/*!*******************************************!*\
-  !*** ./src/containers/editable-inline.js ***!
-  \*******************************************/
-
-/*!********************************************!*\
-  !*** ./node_modules/jquery/dist/jquery.js ***!
-  \********************************************/
-
-/*!********************************************!*\
-  !*** ./src/editable-form/editable-form.js ***!
-  \********************************************/
-
-/*!*********************************************!*\
-  !*** ./src/containers/editable-popover5.js ***!
-  \*********************************************/
-
-/*!**********************************************!*\
-  !*** ./src/containers/editable-container.js ***!
-  \**********************************************/
-
-/*!**************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/enums.js ***!
-  \**************************************************/
-
-/*!**************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/index.js ***!
-  \**************************************************/
-
-/*!**************************************************!*\
-  !*** ./src/editable-form/editable-form-utils.js ***!
-  \**************************************************/
-
-/*!***************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/popper.js ***!
-  \***************************************************/
-
-/*!*******************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/utils/math.js ***!
-  \*******************************************************/
-
-/*!*******************************************************!*\
-  !*** ./src/editable-form/editable-form-bootstrap5.js ***!
-  \*******************************************************/
-
-/*!********************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/popper-lite.js ***!
-  \********************************************************/
-
-/*!*********************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/createPopper.js ***!
-  \*********************************************************/
-
-/*!*********************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/utils/within.js ***!
-  \*********************************************************/
-
-/*!*********************************************************!*\
-  !*** ./node_modules/bootstrap/dist/js/bootstrap.esm.js ***!
-  \*********************************************************/
-
-/*!***********************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/modifiers/flip.js ***!
-  \***********************************************************/
-
-/*!***********************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/modifiers/hide.js ***!
-  \***********************************************************/
-
-/*!***********************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/utils/debounce.js ***!
-  \***********************************************************/
-
-/*!************************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/modifiers/arrow.js ***!
-  \************************************************************/
-
-/*!************************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/modifiers/index.js ***!
-  \************************************************************/
-
-/*!************************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/utils/userAgent.js ***!
-  \************************************************************/
-
-/*!*************************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/modifiers/offset.js ***!
-  \*************************************************************/
-
-/*!*************************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/utils/getAltAxis.js ***!
-  \*************************************************************/
-
-/*!**************************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/utils/mergeByName.js ***!
-  \**************************************************************/
-
-/*!***************************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/dom-utils/contains.js ***!
-  \***************************************************************/
-
-/*!***************************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/utils/getVariation.js ***!
-  \***************************************************************/
-
-/*!****************************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/dom-utils/getWindow.js ***!
-  \****************************************************************/
-
-/*!*****************************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/dom-utils/instanceOf.js ***!
-  \*****************************************************************/
-
-/*!*****************************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/utils/computeOffsets.js ***!
-  \*****************************************************************/
-
-/*!*****************************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/utils/detectOverflow.js ***!
-  \*****************************************************************/
-
-/*!*****************************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/utils/orderModifiers.js ***!
-  \*****************************************************************/
-
-/*!******************************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/dom-utils/getNodeName.js ***!
-  \******************************************************************/
-
-/*!******************************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/modifiers/applyStyles.js ***!
-  \******************************************************************/
-
-/*!******************************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/utils/expandToHashMap.js ***!
-  \******************************************************************/
-
-/*!*******************************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/utils/getBasePlacement.js ***!
-  \*******************************************************************/
-
-/*!*******************************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/utils/rectToClientRect.js ***!
-  \*******************************************************************/
-
-/*!********************************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/dom-utils/getLayoutRect.js ***!
-  \********************************************************************/
-
-/*!********************************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/dom-utils/getNodeScroll.js ***!
-  \********************************************************************/
-
-/*!********************************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/dom-utils/getParentNode.js ***!
-  \********************************************************************/
-
-/*!********************************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/modifiers/computeStyles.js ***!
-  \********************************************************************/
-
-/*!********************************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/modifiers/popperOffsets.js ***!
-  \********************************************************************/
-
-/*!*********************************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/dom-utils/isScrollParent.js ***!
-  \*********************************************************************/
-
-/*!*********************************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/dom-utils/isTableElement.js ***!
-  \*********************************************************************/
-
-/*!*********************************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/modifiers/eventListeners.js ***!
-  \*********************************************************************/
-
-/*!*********************************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/utils/getFreshSideObject.js ***!
-  \*********************************************************************/
-
-/*!*********************************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/utils/mergePaddingObject.js ***!
-  \*********************************************************************/
-
-/*!**********************************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/dom-utils/getClippingRect.js ***!
-  \**********************************************************************/
-
-/*!**********************************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/dom-utils/getDocumentRect.js ***!
-  \**********************************************************************/
-
-/*!**********************************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/dom-utils/getOffsetParent.js ***!
-  \**********************************************************************/
-
-/*!**********************************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/dom-utils/getScrollParent.js ***!
-  \**********************************************************************/
-
-/*!**********************************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/dom-utils/getViewportRect.js ***!
-  \**********************************************************************/
-
-/*!**********************************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/dom-utils/getWindowScroll.js ***!
-  \**********************************************************************/
-
-/*!**********************************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/modifiers/preventOverflow.js ***!
-  \**********************************************************************/
-
-/*!***********************************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/dom-utils/getCompositeRect.js ***!
-  \***********************************************************************/
-
-/*!***********************************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/dom-utils/getComputedStyle.js ***!
-  \***********************************************************************/
-
-/*!***********************************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/dom-utils/isLayoutViewport.js ***!
-  \***********************************************************************/
-
-/*!***********************************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/utils/computeAutoPlacement.js ***!
-  \***********************************************************************/
-
-/*!***********************************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/utils/getOppositePlacement.js ***!
-  \***********************************************************************/
-
-/*!************************************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/dom-utils/listScrollParents.js ***!
-  \************************************************************************/
-
-/*!*************************************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/dom-utils/getDocumentElement.js ***!
-  \*************************************************************************/
-
-/*!**************************************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/dom-utils/getWindowScrollBarX.js ***!
-  \**************************************************************************/
-
-/*!***************************************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/dom-utils/getHTMLElementScroll.js ***!
-  \***************************************************************************/
-
-/*!***************************************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/utils/getMainAxisFromPlacement.js ***!
-  \***************************************************************************/
-
-/*!***************************************************************************!*\
-  !*** ./node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.js ***!
-  \***************************************************************************/
-
-/*!****************************************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/dom-utils/getBoundingClientRect.js ***!
-  \****************************************************************************/
-
-/*!********************************************************************************!*\
-  !*** ./node_modules/@popperjs/core/lib/utils/getOppositeVariationPlacement.js ***!
-  \********************************************************************************/

dist/bootstrap5-editable/css/bootstrap-editable.css

@@ -1,4 +1,4 @@
-/*! X-editable - v1.5.2 
+/*! X-editable Bootstrap 5 - v25.0.7 
 * A maintained fork of x-editable for Bootstrap 5 support.
 * https://git.24unix.net/tracer/x-editable
 * Copyright (c) 2025 Micha Espey; Licensed MIT */
@@ -170,6 +170,76 @@
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
 }
 
+/* Bootstrap 5 inline editing fixes */
+.editable-inline .editableform {
+  display: inline-flex !important;
+  flex-direction: row !important;
+  align-items: center !important;
+  gap: 0.5rem !important;
+  flex-wrap: nowrap !important;
+}
+
+.editable-inline .editable-input {
+  flex-shrink: 1 !important;
+  min-width: 0 !important;
+  max-width: 200px !important; /* Prevent overly wide selects */
+  display: inline-block !important;
+  vertical-align: middle !important;
+}
+
+.editable-inline .editable-input select {
+  max-width: 100% !important;
+  min-width: 120px !important;
+}
+
+.editable-inline .editable-buttons {
+  flex-shrink: 0 !important;
+  margin-left: 0.5rem !important;
+  margin-top: 0 !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  gap: 0.25rem !important;
+  vertical-align: middle !important;
+}
+
+.editable-inline .control-group {
+  white-space: nowrap !important;
+  display: inline-flex !important;
+  align-items: center !important;
+}
+
+/* Improve button styling for Bootstrap 5 */
+.editable-buttons .btn {
+  padding: 0.25rem 0.5rem;
+  line-height: 1.2;
+  border-radius: 0.25rem;
+}
+
+.editable-buttons .btn-sm {
+  padding: 0.125rem 0.25rem;
+  font-size: 0.875rem;
+}
+
+/* Hide buttons initially for datepicker inputs - using discovered DOM structure */
+/* Buttons are siblings to editable-input that contains datepicker */
+.editable-input:has(.input-group.date) + .editable-buttons,
+.editable-input:has(.input-group.datepicker-above) + .editable-buttons,
+/* Buttons might be in same container as editable-input */
+*:has(.editable-input .input-group.date) .editable-buttons,
+*:has(.editable-input .input-group.datepicker-above) .editable-buttons {
+  display: none !important;
+  visibility: hidden !important;
+}
+
+/* Show buttons when they have the show-buttons class */
+.editable-input:has(.input-group.date) + .editable-buttons.show-buttons,
+.editable-input:has(.input-group.datepicker-above) + .editable-buttons.show-buttons,
+*:has(.editable-input .input-group.date) .editable-buttons.show-buttons,
+*:has(.editable-input .input-group.datepicker-above) .editable-buttons.show-buttons {
+  display: inline-flex !important;
+  visibility: visible !important;
+}
+
 .editable-container.editable-popup {
     max-width: none !important; /* without this rule poshytip/tooltip does not stretch */
 }  

dist/bootstrap5-editable/css/editable-form.css

@@ -165,3 +165,73 @@
    border-radius: 0.375rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
 }
+
+/* Bootstrap 5 inline editing fixes */
+.editable-inline .editableform {
+  display: inline-flex !important;
+  flex-direction: row !important;
+  align-items: center !important;
+  gap: 0.5rem !important;
+  flex-wrap: nowrap !important;
+}
+
+.editable-inline .editable-input {
+  flex-shrink: 1 !important;
+  min-width: 0 !important;
+  max-width: 200px !important; /* Prevent overly wide selects */
+  display: inline-block !important;
+  vertical-align: middle !important;
+}
+
+.editable-inline .editable-input select {
+  max-width: 100% !important;
+  min-width: 120px !important;
+}
+
+.editable-inline .editable-buttons {
+  flex-shrink: 0 !important;
+  margin-left: 0.5rem !important;
+  margin-top: 0 !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  gap: 0.25rem !important;
+  vertical-align: middle !important;
+}
+
+.editable-inline .control-group {
+  white-space: nowrap !important;
+  display: inline-flex !important;
+  align-items: center !important;
+}
+
+/* Improve button styling for Bootstrap 5 */
+.editable-buttons .btn {
+  padding: 0.25rem 0.5rem;
+  line-height: 1.2;
+  border-radius: 0.25rem;
+}
+
+.editable-buttons .btn-sm {
+  padding: 0.125rem 0.25rem;
+  font-size: 0.875rem;
+}
+
+/* Hide buttons initially for datepicker inputs - using discovered DOM structure */
+/* Buttons are siblings to editable-input that contains datepicker */
+.editable-input:has(.input-group.date) + .editable-buttons,
+.editable-input:has(.input-group.datepicker-above) + .editable-buttons,
+/* Buttons might be in same container as editable-input */
+*:has(.editable-input .input-group.date) .editable-buttons,
+*:has(.editable-input .input-group.datepicker-above) .editable-buttons {
+  display: none !important;
+  visibility: hidden !important;
+}
+
+/* Show buttons when they have the show-buttons class */
+.editable-input:has(.input-group.date) + .editable-buttons.show-buttons,
+.editable-input:has(.input-group.datepicker-above) + .editable-buttons.show-buttons,
+*:has(.editable-input .input-group.date) .editable-buttons.show-buttons,
+*:has(.editable-input .input-group.datepicker-above) .editable-buttons.show-buttons {
+  display: inline-flex !important;
+  visibility: visible !important;
+}

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
+ */

dist/jquery.js.LICENSE.txt

@@ -1,10 +0,0 @@
-/*!
- * jQuery JavaScript Library v3.7.1
- * https://jquery.com/
- *
- * Copyright OpenJS Foundation and other contributors
- * Released under the MIT license
- * https://jquery.org/license
- *
- * Date: 2023-08-28T13:37Z
- */

package.json

@@ -1,8 +1,8 @@
 {
-  "name": "@24unix/x-editable",
-  "title": "X-editable",
+  "name": "x-editable-bootstrap5",
+  "title": "X-editable Bootstrap 5",
   "description": "A maintained fork of x-editable for Bootstrap 5 support.",
-  "version": "1.5.2",
+  "version": "25.0.7",
   "homepage": "https://git.24unix.net/tracer/x-editable",
   "author": {
     "name": "Micha Espey",
@@ -18,8 +18,12 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://git.24unix.net/tracer/x-editable.git"
+    "url": "https://git.24unix.net/tracer/x-editable-bs5.git"
   },
+  "mirrors": [
+    "https://github.com/24unix/x-editable-bs5",
+    "https://gitlab.com/24unix/x-editable-bs5"
+  ],
   "bugs": {
     "url": "https://git.24unix.net/tracer/x-editable/issues"
   },
@@ -35,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",
@@ -45,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",

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";

src/editable-form/editable-form.css

@@ -165,3 +165,73 @@
    border-radius: 0.375rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
 }
+
+/* Bootstrap 5 inline editing fixes */
+.editable-inline .editableform {
+  display: inline-flex !important;
+  flex-direction: row !important;
+  align-items: center !important;
+  gap: 0.5rem !important;
+  flex-wrap: nowrap !important;
+}
+
+.editable-inline .editable-input {
+  flex-shrink: 1 !important;
+  min-width: 0 !important;
+  max-width: 200px !important; /* Prevent overly wide selects */
+  display: inline-block !important;
+  vertical-align: middle !important;
+}
+
+.editable-inline .editable-input select {
+  max-width: 100% !important;
+  min-width: 120px !important;
+}
+
+.editable-inline .editable-buttons {
+  flex-shrink: 0 !important;
+  margin-left: 0.5rem !important;
+  margin-top: 0 !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  gap: 0.25rem !important;
+  vertical-align: middle !important;
+}
+
+.editable-inline .control-group {
+  white-space: nowrap !important;
+  display: inline-flex !important;
+  align-items: center !important;
+}
+
+/* Improve button styling for Bootstrap 5 */
+.editable-buttons .btn {
+  padding: 0.25rem 0.5rem;
+  line-height: 1.2;
+  border-radius: 0.25rem;
+}
+
+.editable-buttons .btn-sm {
+  padding: 0.125rem 0.25rem;
+  font-size: 0.875rem;
+}
+
+/* Hide buttons initially for datepicker inputs - using discovered DOM structure */
+/* Buttons are siblings to editable-input that contains datepicker */
+.editable-input:has(.input-group.date) + .editable-buttons,
+.editable-input:has(.input-group.datepicker-above) + .editable-buttons,
+/* Buttons might be in same container as editable-input */
+*:has(.editable-input .input-group.date) .editable-buttons,
+*:has(.editable-input .input-group.datepicker-above) .editable-buttons {
+  display: none !important;
+  visibility: hidden !important;
+}
+
+/* Show buttons when they have the show-buttons class */
+.editable-input:has(.input-group.date) + .editable-buttons.show-buttons,
+.editable-input:has(.input-group.datepicker-above) + .editable-buttons.show-buttons,
+*:has(.editable-input .input-group.date) .editable-buttons.show-buttons,
+*:has(.editable-input .input-group.datepicker-above) .editable-buttons.show-buttons {
+  display: inline-flex !important;
+  visibility: visible !important;
+}

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

src/inputs/date/date.js

@@ -26,18 +26,16 @@ $(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');
         this.init('date', options, Date.defaults);
         this.initPicker(options, Date.defaults);
         
         // Ensure type is set correctly
         this.type = 'date';
+        console.log('Date input initialized');
     };
 
     $.fn.editableutils.inherit(Date, $.fn.editabletypes.abstractinput);    
@@ -68,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
@@ -77,23 +82,48 @@ $(function(){
         },
         
         render: function () {
+            console.log('Date render method called');
             // Ensure we have an input element
             if (!this.$input || !this.$input.length) {
+                console.log('Date render: No input element found');
                 return;
             }
             
+            console.log('Date render: Input element found');
+            
             // Initialize datepicker immediately
             try {
                 this.$input.datepicker(this.options.datepicker);
+                console.log('Date render: Datepicker initialized');
                 
                 // Force set the initial value if we have one
                 if (this.value) {
                     this.$input.datepicker('setDate', this.value);
                 }
             } catch (error) {
-                // Silently handle datepicker initialization errors
+                console.log('Date render: Datepicker error:', error);
             }
             
+            // Use a more aggressive approach - hide buttons with multiple methods
+            var self = this;
+            setTimeout(function() {
+                // Try multiple selectors to find buttons
+                var $buttons = self.$form ? self.$form.find('.editable-buttons') : $();
+                if ($buttons.length === 0) {
+                    $buttons = self.$tpl.closest('.editableform').find('.editable-buttons');
+                }
+                if ($buttons.length === 0) {
+                    $buttons = self.$tpl.closest('.editable-container').find('.editable-buttons');
+                }
+                
+                console.log('Date render: Found buttons:', $buttons.length);
+                if ($buttons.length > 0) {
+                    $buttons.hide();
+                    $buttons.css('display', 'none');
+                    console.log('Date render: Hidden buttons');
+                }
+            }, 100);
+            
             //"clear" link
             if(this.options.clear) {
                 this.$clear = $('<a href="#"></a>').html(this.options.clear).click($.proxy(function(e){
@@ -178,24 +208,41 @@ $(function(){
         },
 
         autosubmit: function() {
+            // Override default autosubmit behavior for datepicker workflow
+            // Show buttons only after date selection
+            this.$input.on('changeDate', $.proxy(function(e) {
+                console.log('Date changeDate event triggered');
+                // Hide the datepicker
+                this.$input.datepicker('hide');
+                // Show save/cancel buttons after date selection
+                setTimeout($.proxy(function() {
+                    if (this.options.showbuttons !== false) {
+                        var $buttons = this.$form ? this.$form.find('.editable-buttons') : $();
+                        if ($buttons.length === 0) {
+                            $buttons = this.$tpl.closest('.editableform').find('.editable-buttons');
+                        }
+                        if ($buttons.length === 0) {
+                            $buttons = this.$tpl.closest('.editable-container').find('.editable-buttons');
+                        }
+                        
+                        console.log('Date changeDate: Found buttons to show:', $buttons.length);
+                        $buttons.show();
+                        $buttons.css('display', 'inline-block');
+                    }
+                }, this), 100);
+            }, this));
+            
+            // Keep the original click behavior as backup
             this.$input.on('mouseup', '.day', function(e){
                 if($(e.currentTarget).is('.old') || $(e.currentTarget).is('.new')) {
                     return;
                 }
+                console.log('Date mouseup on day');
                 var $form = $(this).closest('form');
                 setTimeout(function() {
-                    $form.submit();
+                    $form.find('.editable-buttons').show();
                 }, 200);
             });
-           //changedate is not suitable as it triggered when showing datepicker. see #149
-           /*
-           this.$input.on('changeDate', function(e){
-               var $form = $(this).closest('form');
-               setTimeout(function() {
-                   $form.submit();
-               }, 200);
-           });
-           */
        },
        
        /*

src/inputs/date/datefield.js

@@ -33,12 +33,36 @@ Automatically shown in inline mode.
             //need to disable original event handlers
             this.$input.off('focus keydown');
             
+            // Hide buttons initially for datepicker workflow
+            var self = this;
+            setTimeout(function() {
+                if (!self.$form) {
+                    // Find buttons in the broader DOM and hide them directly
+                    var $allButtons = $('.editable-buttons:visible');
+                    if ($allButtons.length > 0) {
+                        $allButtons.each(function(i, btn) {
+                            // Directly hide this button for datepicker
+                            var $btn = $(btn);
+                            $btn.hide();
+                            $btn.css('display', 'none !important');
+                            $btn.addClass('datepicker-hidden');
+                            
+                            // Store reference for later showing
+                            self.$dateButtons = $btn;
+                        });
+                    }
+                }
+            }, 500);
+            
             //update value of datepicker
             this.$input.keyup($.proxy(function(){
                this.$tpl.removeData('date');
                this.$tpl.datepicker('update');
             }, this));
             
+            // Manually call autosubmit to set up our event handlers
+            this.autosubmit();
+            
         },   
         
        value2input: function(value) {
@@ -86,7 +110,61 @@ Automatically shown in inline mode.
        },
        
        autosubmit: function() {
-         //reset autosubmit to empty  
+         // Override default autosubmit behavior for datepicker workflow
+         // We handle this manually with changeDate event
+         
+         // Setup the manual workflow: show buttons only after date selection
+         this.$tpl.on('changeDate', $.proxy(function(e) {
+             // Hide the datepicker using multiple methods to ensure it closes
+             setTimeout($.proxy(function() {
+                 // Try datepicker hide methods
+                 try {
+                     this.$tpl.datepicker('hide');
+                 } catch(err) {
+                     // Fallback to input method
+                 }
+                 
+                 try {
+                     this.$input.datepicker('hide');
+                 } catch(err) {
+                     // Continue to force methods
+                 }
+                 
+                 // Force hide all datepicker elements
+                 $('.datepicker').hide();
+                 $('.datepicker-dropdown').hide();
+                 
+                 // Ensure any remaining visible datepickers are hidden
+                 var $visiblePicker = $('.datepicker:visible, .datepicker-dropdown:visible');
+                 if ($visiblePicker.length > 0) {
+                     $visiblePicker.css('display', 'none !important');
+                     $visiblePicker.css('visibility', 'hidden');
+                 }
+             }, this), 10);
+             
+             // Show save/cancel buttons after date selection
+             setTimeout($.proxy(function() {
+                 if (this.options.showbuttons !== false) {
+                     var $buttons = this.$dateButtons || $('.editable-buttons.datepicker-hidden');
+                     if ($buttons.length === 0) {
+                         $buttons = this.$form ? this.$form.find('.editable-buttons') : $();
+                     }
+                     if ($buttons.length === 0) {
+                         $buttons = this.$tpl.closest('.editableform').find('.editable-buttons');
+                     }
+                     if ($buttons.length === 0) {
+                         $buttons = this.$tpl.closest('.editable-container').find('.editable-buttons');
+                     }
+                     
+                     $buttons.show();
+                     $buttons.css('display', 'inline-flex');
+                     $buttons.addClass('show-buttons');
+                     $buttons.removeClass('datepicker-hidden');
+                 }
+             }, this), 100);
+         }, this));
+         
+         // Do NOT call parent autosubmit to prevent immediate form submission
        }
     });
     

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));

test-types.js

@@ -0,0 +1 @@
+console.log('Available input types:', Object.keys($.fn.editabletypes));

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"]
+                }
+            ]
         }
     }
 ];