Modernize Select2 integration and fix popover page jumping

- Upgraded Select2 from bundled v3.4.4 (2013) to v4.x peer dependency
- Removed legacy Select2 v3.x bundled files from lib directory
- Updated Select2 input to use v4.x API (events, AJAX, templates)
- Fixed Bootstrap 5 popover page jumping issue with multi-timeout scroll restoration
- Added comprehensive migration documentation in README-select2-upgrade.md
- Rebuilt all distribution files with updated source code

Breaking Changes:
- Select2 now requires separate installation as peer dependency
- AJAX configuration updated for v4.x format
- Event names changed (select2:select vs select2-loaded)
- Template functions renamed (templateResult vs formatResult)
This commit is contained in:
Micha
2025-10-09 15:14:25 +02:00
parent 1dbf4d2fa7
commit b137f68801
36 changed files with 6439 additions and 4539 deletions

92
README-select2-upgrade.md Normal file
View File

@@ -0,0 +1,92 @@
# Select2 Modernization
This fork has been updated to work with **Select2 v4.x** instead of the bundled v3.4.4 from 2013.
## Breaking Changes
### Select2 Dependency
Select2 is now a **peer dependency** and must be installed separately:
```bash
npm install select2@^4.0.0
```
### Include Select2 in Your HTML
You must now include Select2 yourself:
```html
<link href="node_modules/select2/dist/css/select2.css" rel="stylesheet" type="text/css">
<script src="node_modules/select2/dist/js/select2.js"></script>
```
For Bootstrap 5 styling, also include:
```html
<link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet">
```
## API Changes
### Event Handling
Select2 v4.x uses different event names:
- `select2:select` instead of `select2-loaded`
- `select2:unselect` for deselection
### AJAX Configuration
For remote data sources, use the new v4.x format:
```javascript
$('#element').editable({
select2: {
ajax: {
url: '/api/data',
dataType: 'json',
delay: 250,
data: function (params) {
return {
query: params.term,
page: params.page
};
},
processResults: function (data) {
return {
results: data.map(function(item) {
return {
id: item.id,
text: item.name
};
})
};
}
}
}
});
```
### Template Functions
Use `templateResult` and `templateSelection` instead of `formatResult` and `formatSelection`:
```javascript
select2: {
templateResult: function(item) {
return item.text;
},
templateSelection: function(item) {
return item.text;
}
}
```
## Migration Guide
1. **Install Select2 v4.x** as a peer dependency
2. **Include Select2 CSS/JS** in your HTML before x-editable
3. **Update AJAX configurations** to use v4.x format
4. **Update template functions** to use new naming
5. **Test thoroughly** - Select2 v4.x has different behavior
## Debug Mode
The updated code includes console logging for debugging. Check browser console for:
- `[Select2 Debug] value2input called with: ...`
- `[Select2 Debug] Item selected: ...`
- `[Select2 Debug] Change event triggered: ...`