I’ve a Select2 element that populates after a jquery call.
It has a search box, but the search box hides everything, also the placeholder. I’ve two problems here

• placeholders is hidden
• I cannot add a static element, or better, it is in the code but doesn’t show up

This is the template function

  function iconUser (userDetails) {
    return $("<span><i class="fa-solid fa-"+userDetails.customerType+""></i> "+userDetails.customerName+" - "+userDetails.stockName+"</span>");
  }

And this is my select2 declaration

let customerSelect = $('#customerSelect');
customerSelect.select2({
      dropdownAutoWidth: true,
      templateResult: iconUser,
      templateSelection: function(data) {
        return data.customerName
      },
      minimumInputLength: 3,
      placeholder: "-- Select a customer --",
      ajax: {
        url : "/admin/ajax/orders.php",
        type:'POST',
        dataType: 'json',
        delay: 250,
        data: function (params) {
          return {
            searchTerm: params.term,
            action: 'listCustomers',
            isJs: true
          };
        },
        processResults: function (result) {
          return {
            results: $.map(result['data'], function (item) {
              return {
                id: item.id,
                customerName: item.customerName,
                stockName: item.stockName,
                stockId: item.stockId,
                customerType: item.customerType
              }
            })
          };
        }
      }
    })
      .on('select2:select', function (e) {
        var data = e.params.data;
        companySelect.val(data.stockId).trigger('change');
      });

Once loaded the page, there’s no placeholder shown

Then I try to add an option manually to be displayed, I get the datas with a separate ajax call, put them in the variable “order” and then append to the select2

const customerType = (order['customerType'] === 'shop') ? 'building' : 'user';
const newOption = new Option(order['customerName'], `${customerType}_${order['customerId']}`, false, false)
$("#customerSelect").append(newOption).trigger('change');

But I still cannot see displayed the manually added option

even if in the code, everything appears fine

<select class="form-control select2-hidden-accessible" id="customerSelect" style="width: 200px !important;" tabindex="-1" aria-hidden="true" data-select2-id="select2-data-customerSelect">
  <option value="building_xxxx" data-select2-id="select2-data-6-9wgc">Xxxxx Xxx</option>
</select>