He agregado un botón "Agregar nueva persona" en una lista desplegable select2

El código select2 se ve así:

 $('#subFundSelection').select2({ width: '100%', placeholder: 'Select a sub-fund', ajax: { url: '/FundInfo/SearchLegalEntities', type: 'GET', dataType: 'json', delay: 250, allowClear: true, data: function (params) { return { searchTerm: params.term }; }, processResults: function (data) { return { results: $.map(data.legalEntities, function (obj) { return { id: obj.Id, text: obj.Text }; }) }; }, }, minimumInputLength: 2 }).on('select2:open', () => { $(".select2-results:not(:has(button))").append('<button id="newPersonButton" style="width: 100%" type="button" class="btn btn-primary" onClick="CreateLegalEntity()">+ Add a new person</button>') })

Un botón está bien agregado a la lista desplegable (no puedo agregar una imagen, lo siento)

y cuando hago clic en este botón "Agregar nueva persona", abro un modal.

 function CreateLegalEntity() { $('#CreateLegalEntityModal').modal('show'); }

Todo funciona bien, en lugar del hecho de que la lista desplegable no se cierra después del clic y aparece en la parte superior del modal, hasta que hago clic en otro lugar de la pantalla.

Lo siento por no adjuntar capturas de pantalla, pero el sitio web no me lo permite.

Yo he tratado:

 $(this).blur() $(".select2").trigger('blur') $(".select2").trigger('change')