Files

Micha b137f68801 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)

2025-10-09 15:14:25 +02:00

2.4 KiB

Raw Blame History

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:

npm install select2@^4.0.0

Include Select2 in Your HTML

You must now include Select2 yourself:

<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:

<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:

$('#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:

select2: {
    templateResult: function(item) {
        return item.text;
    },
    templateSelection: function(item) {
        return item.text;
    }
}

Migration Guide

Install Select2 v4.x as a peer dependency
Include Select2 CSS/JS in your HTML before x-editable
Update AJAX configurations to use v4.x format
Update template functions to use new naming
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: ...

2.4 KiB Raw Blame History