Select2 unselected options

Is this a bug?
#1

I am using select2 with pagination to load more data from db when user scroll the drop down, the issue i am facing is when i select all the records and then i unselect some record then some of them show in dropdown and some not. I working on ROR.

this is the code

$(field).select2({
      allowClear: true,
      placeholder: 'Select Records',
      width: 'resolve',
      closeOnSelect: false,
      ajax: {
        url: `/programs/${field.dataset.programId}/fetch_records`,
        type: 'POST',
        dataType: 'json',
        beforeSend: function(xhr) {
          xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'));
        },
        data: function (params) {
          $(document).on('manual-append-end', function(event) {
            return;
          });

          var query = {
            term: params.term,
            page:  params.page || 1
          }

          return query;
        },
        processResults: function (data, params) {
          debugger
          params.page = params.page || 1;
          var dropdown = $('#select2-manual_scheduler_record_ids-results')
          var existingOptions = dropdown.find('li[aria-selected="false"]').toArray();
          var existingResults = existingOptions.map(function(option) {
            return {
              id: $(option).val(),
              text: $(option).text()
            };
          });
          var combinedResults = existingResults.concat(data.results);
          return {
            results: combinedResults,
            pagination: {
              more: dropdown.find('li[aria-selected="false"]').length < 1 ? data.pagination.more : false
            }
          };
        },
        cache: true
      },
      minimumInputLength: 0
    })

and I have tried these solutions

  $('.select2').on('select2:unselect', function(e) {
    debugger
    var optionElement = new Option(e.params.data.text, e.params.data.id, false, false);

    $(e.target).append(optionElement).trigger('change');

    // Trigger a custom event to signal that the manual append is complete
    $(e.target).trigger('manual-append-end');
  });

 $('.select2').on('select2:unselect', function(e) {
    var unselectedValue = e.params.data.id;

    var programId = $(this).data('program-id');
    $.ajax({
      url: `/programs/${programId}/fetch_records`,
      type: 'POST',
      dataType: 'json',
      data: { term: unselectedValue, bulk: true },
      beforeSend: function(xhr) {
        xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'));
      },
      success: function(response) {
        var newOption = response.results.find(option => option.id == unselectedValue);
        if (newOption) {
          var optionElement = new Option(newOption.text, newOption.id, false, false);
          $(e.target).append(optionElement).trigger('change');
        }
      }
    });
  });

the above solutions i tried work but after that when i open the select box the created option disappear due to the execution of data part

#2

Resolve the issue by applying the below solution

  initializeRecordKeySelect2: function(field) {
    $(field).select2({
      allowClear: true,
      placeholder: 'Select Records',
      width: 'resolve',
      closeOnSelect: false,
      ajax: {
        url: `/programs/${field.dataset.programId}/fetch_records`,
        type: 'POST',
        dataType: 'json',
        beforeSend: function(xhr) {
          xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'));
        },
        data: function (params) {
          var query = {
            term: params.term,
            page:  params.page
          }

          return query;
        },
        processResults: function(data, params) {
          params.page = params.page || 1;
          params['_type'] = 'query'

          var existingData = $(field).find('option').map(function() {
            return {
              id: $(this).val(),
              text: $(this).text()
            };
          }).get();

          var filteredData = data.results.filter(function(newItem) {
            return !existingData.some(function(existingItem) {
              return existingItem.id == newItem.id;
            });
          });

          var dropdown = $('#select2-manual_scheduler_record_ids-results')
          var nonSelectedOptions = dropdown.find('li[aria-selected="false"]').toArray()

          if (nonSelectedOptions.length > 0){
            existingData.filter(function(existingItem) {

              nonSelectedOptions.some(function(newItem) {
                if (newItem.textContent.trim() === existingItem.text.trim()) {
                  $(newItem).remove();
                };
              });
            });
          }

          var combinedData = existingData.concat(filteredData);

          return {
            results: combinedData,
            pagination: {
              more: data.pagination.more
            }
          };
        }
      },
    })
  },