Remove remaining screenshot files

- Implement proper button hiding/showing workflow for datepicker inputs
- Buttons now hidden initially when datepicker opens
- Buttons appear only after date selection, not immediately
- Datepicker closes automatically after date selection
- Enhanced CSS specificity for reliable button control
- Robust fallback methods for datepicker closing
- Update to version 25.0.5

.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

README.md

@@ -33,6 +33,11 @@ The demo showcases:
 
 ## Installation
 
+### Via npm
+```bash
+npm install x-editable-bootstrap5
+```
+
 ### Dependencies
 
 This library requires:
@@ -98,6 +103,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

@@ -50,7 +50,7 @@ $(function() {
     });
 
     const initialDateValue = new Date().toISOString().split('T')[0];
-    
+
     $('#datepicker').editable({
         type: 'date',
         url: 'demo/demo.php',  // URL to send the POST request

dist/README.md

@@ -1,17 +1,123 @@
 # 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** 
+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.
-- **Bootstrap Icons** (replacing Glyphicons)
 
-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
+- **Date pickers** - using bootstrap-datepicker
+- **Drop-in replacement** - minimal code changes needed
+- **Streamlined codebase** - Bootstrap 5 only, legacy code removed
 
-Later: 
+## Demo
-### Using npm:
+
-```sh
+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
+- Date picker functionality
+- Basic in-place editing
+
+## Installation
+
+### Via npm
+```bash
 npm install x-editable-bootstrap5
 ```
+
+### Dependencies
+
+This library requires:
+- **Bootstrap 5** (CSS and JS)
+- **jQuery 3.x**
+- **bootstrap-datepicker** (for date inputs)
+
+### 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 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">
+<script src="dist/bootstrap5-editable/js/bootstrap-editable.js"></script>
+```
+
+2. **Initialize editable elements:**
+```javascript
+$('#my-editable').editable({
+    type: 'select',
+    source: [
+        {value: 1, text: 'Option 1'},
+        {value: 2, text: 'Option 2'}
+    ],
+    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)
+
+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

@@ -21,302 +21,7 @@
  * Date: 2023-08-28T13:37Z
  */
 
-/*!****************************!*\
+/*! X-editable Bootstrap 5 - v25.0.4 
-  !*** ./src/inputs/list.js ***!
+* A maintained fork of x-editable for Bootstrap 5 support.
-  \****************************/
+* https://git.24unix.net/tracer/x-editable
-
+* Copyright (c) 2025 Micha Espey; Licensed MIT */
-/*!****************************!*\
-  !*** ./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.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 */
@@ -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;
+}

package.json

@@ -1,8 +1,8 @@
 {
-  "name": "@24unix/x-editable",
+  "name": "x-editable-bootstrap5",
-  "title": "X-editable",
+  "title": "X-editable Bootstrap 5",
   "description": "A maintained fork of x-editable for Bootstrap 5 support.",
-  "version": "1.5.2",
+  "version": "25.0.5",
   "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"
   },

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/inputs/date/date.js

@@ -33,11 +33,13 @@ $(function(){
     }    
     
     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);    
@@ -77,23 +79,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 +205,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
        }
     });