title: Select2 Selected item becomes empty on re-select
body: <p>I have select element inside a modal form configured as single selection, I load my data using ajax call. The problem is when I select <code>item1</code> then hide the modal, when I show the modal again and select <code>item1</code> again the select field text becomes empty.</p>
  <p>First selection:</p>
  <p><a href="https://i.stack.imgur.com/HQ62R.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HQ62R.png" alt="enter image description here" /></a></p>
  <p>Second selection:</p>
  <p><a href="https://i.stack.imgur.com/qWltU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qWltU.png" alt="enter image description here" /></a></p>
  <p>I tried logging the value and selected object changed.</p>
  <p>First selection logged value:</p>
  <p><a href="https://i.stack.imgur.com/Vd2v0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Vd2v0.png" alt="enter image description here" /></a></p>
  <p>Second selection logged value:</p>
  <p><a href="https://i.stack.imgur.com/DdWJj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DdWJj.png" alt="enter image description here" /></a></p>
  <p>So basically the selected object is changed on the second selection. I tried re-initializing my select2 but still the problem persist. I also checked the response json on my second selection and the content is correct.</p>
  <p>my html code:</p>
  <pre><code>&lt;div class=&quot;modal fade&quot; id=&quot;my-modal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;modal-title&quot; aria-hidden=&quot;true&quot;&gt;
  &lt;div class=&quot;modal-dialog modal-dialog-centered&quot; role=&quot;document&quot;&gt;
      &lt;form class=&quot;w-100&quot; id=&quot;my-form&quot;&gt;
          &lt;div class=&quot;modal-content&quot;&gt;
              &lt;div class=&quot;modal-header&quot;&gt;
                  &lt;h5 class=&quot;modal-title&quot; id=&quot;modal-title&quot; &gt;Modal&lt;/h5&gt;
                  &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;
                  &lt;/button&gt;
              &lt;/div&gt;
              &lt;div class=&quot;modal-body&quot;&gt;
                  &lt;div class=&quot;form-group&quot;&gt;
                      &lt;div class=&quot;d-flex w-100&quot;&gt;
                          &lt;div class=&quot;w-50 d-flex flex-column pr-1&quot;&gt;
                              &lt;div class=&quot;d-flex&quot;&gt;
                              &lt;select id=&quot;my-select&quot; class=&quot;form-control&quot; data-style=&quot;select-with-transition&quot;&gt;
                                  &lt;option&gt;&lt;/option&gt;
                              &lt;/select&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>my javascript code:</p>
  <pre><code>$('#my-modal').on('shown.bs.modal', function () {
          $('#my-select').select2({
              placeholder: &quot;select item&quot;,
              allowClear: true,
              dropdownParent: $('#my-modal'),
              ajax: {
                  url: &quot;/my-url&quot;,
                  dataType: &quot;json&quot;,
                  delay: 250,
                  data: function(param) {
                      return {
                          search: param.term
                      }
                  },
                  processResults: function(data) {
                      return {
                          results: data.items
                      };
                  },
                  cache: true
              },
              escapeMarkup: function(e) {
                  return e
              },
              minimumInputLength: 1,
              templateResult: function(repo) {
                  if (repo.loading) {
                      return repo.text;
                  }
                  return `&lt;option value=&quot;${repo.id}&quot;&gt;${repo.name}&lt;/option&gt;`
              },
              templateSelection: function(item) {
                  console.log(item);
                  return item.name 
              }
          });
      });
  </code></pre>