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:
92
README-select2-upgrade.md
Normal file
92
README-select2-upgrade.md
Normal 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: ...`
|
Reference in New Issue
Block a user