title: Select size is not getting refreshed after dynamically adding options
body: <p>I have some super simple code which dynamically adds options to a <code>Select</code> element on click. (The options are sent from the server)</p>
  
  <pre><code>$document.on('click', 'select', function (this: HTMLSelectElement) {
      const slct = $(this);
      const isdict = slct.data&lt;string&gt;('dictionaryctrlr');
      if (!isdict) { return; }
      let querysrch = slct.data&lt;string&gt;('querysrch');
      querysrch = querysrch ? '&amp;' + querysrch : '';
      const postData = slct.closest('.pseudoRec').find(':input').serializeArray();
      const posturl = getActionUrl2(isdict, 'GetSelectOptions', undefined, 'SelectFieldName=' + leftCutTill($(this).data&lt;string&gt;('selectfieldname')!, '.') + querysrch);
      $.ajax({
          url: posturl,
          data: postData,
          success: (data: any[] | undefined) =&gt; {
              if (!data) { return; }
              slct.find('option').filter(function (this: HTMLOptionElement) { return this.value &amp;&amp; !this.selected; }).remove();
              for (let x of data) {
                  var opt = new Option(x.Value, x.Key);
                  this.add(opt);
              }
          }
      });
  });
  </code></pre>
  
  <p>The issue is, that even though the options are getting added, the user doesn't see them in the opened list, the dropdown still shows tiny/empty.</p>
  
  <p>Only when he re-clicks does it open with all options displayed nicely.</p>
  
  <p>Is there a way to add the elements in some sort of "preexpanding" event? or just a way to tell the dropdown to resize itslef? or some other ideas?</p>
  
  <p>Thanks!</p>