Laravel / PHP - Items being deleted after selecting another

[garbinmarcelo]

Prerequisites

• I have searched for similar issues in both open and closed tickets and cannot find a duplicate
• The issue still exists against the latest master branch of Select2
• This is not a usage question (Those should be directed to the community)
• I have attempted to find the simplest possible steps to reproduce the issue
• I have included a failing test as a pull request (Optional)

Steps to reproduce the issue

1. Populate select with data coming from the database;
2. HTML coded: {!! Form::select('id_cargo[]', $cargos, (isset($usuarioCargos))? $usuarioCargos : null, ['id' => 'id_cargo', 'class' => 'form-control select2', 'multiple' => 'multiple']) !!}
3. When you delete an item from the list, or select a new item, the old items are deleted.

PS.: I'm not using ajax requests. I tried to use loop, and put the id's manually, the problem persists. Other functions of select2 work normally, but I have this problem in changing already populated data coming from the database. Here's the demo below.

Demo with data coming from the database, the first item is deleted, then the second is also removed. After that, I test with the data contained in the front end, add two items, I delete the first and the second remains, this would be the ideal behavior to be used also with the data coming from the database.
Note: My list has more than 2,000 items, but I believe this should not interfere.

Expected behavior and actual behavior

I would like to keep the data after selecting another, or after deleting a single item. This works if the data isn't populated from the database, only on the front-end.

Environment

Browsers

• Google Chrome
• Mozilla Firefox
• Internet Explorer

Operating System

• Windows
• Mac OS X
• Linux
• Mobile

Libraries

• jQuery version: 3.2.1
• Select2 version: 4.0.3

Isolating the problem

• This bug happens on the examples page
• The bug happens consistently across all tested browsers
• This bug happens when using Select2 without other plugins
• I can reproduce this bug in a jsbin

[alexweissman]

Could we please see your client-side (Javascript) code?

FYI, if you're going to be offering a list of 2000+ items, I'd strongly recommend that you consider using AJAX and pagination rather than rendering all of the items in the initial page load.

[garbinmarcelo]

Thanks for the feedback @alexweissman.
So, my JS code is simple but functional, see:

$(document).ready(function() {
    $('select.select2').select2({
        locale: 'pt-BR',
        placeholder: 'Selecionar item',
        width: '100%'
    });
});

I will consider doing in ajax, how would that pagination you cited? does it automatically or do I need some code? If you can give me an example, I'm grateful.

[alexweissman]

Pagination isn't fully documented yet, but in the meantime there is an example here: https://select2.org/data-sources/ajax#additional-examples

Of course, you need to make sure that your remote data source can perform filtering and pagination on the server side. If you're using Laravel 5.5, they have a new feature that makes it easier to set up JSON APIs: https://laravel.com/docs/5.5/eloquent-resources

[alexweissman]

Pagination is now documented: https://select2.org/data-sources/ajax#pagination

[alexweissman]

I'm closing this because it sounds like you may have found another way to work around this. I'm not sure what's causing the problem with the non-AJAX data source, but it is most likely a duplicate of another open issue. For example, #3772 and #3773.

[garbinmarcelo]

I have not found yet, if I find I'll come back with an answer. Thanks