[dropdown] API-driven dropdowns do not display placeholder on first render

[jleahy]

Bug Report

When a dropdown configued to fetch its contents from an API endpoint and the placeholder is specified in javascript rather than HTML then the initial placeholder is not present. For non-API endpoints the behavior is correct. Calling the 'clear' behavior on the dropdown or clicking the 'x' on a clearable dropdown restores the placeholder. A functional workaround is to call clear immediately after the dropdown is initialized.

Steps to reproduce

1. Define a dropdown in HTML as below:

<div class="ui search selection dropdown" id="xyz-dropdown">
  <i class="dropdown icon"></i>
  <div class="text"></div>
</div>

3. Initialize the dropdown from javascript as below:

$('#xyz-dropdown').dropdown({
  clearable: true,
  match: 'text',
  placeholder: 'Select XYZ',
  apiSettings: {
    'url': '/api/blah/{query}',
  },
});

4. Note that the placeholder ("Select XYZ") doesn't appear when the page renders.
5. Call $('#xyz-dropdown').dropdown('clear')
6. Note that the placeholder now appears.

Expected result

The placeholder is expected to appear on page load, as it does if the 'apiSettings' key is not present.

Actual result

The placeholder does not appear on page load.

Testcase

https://jsfiddle.net/ryf5b317/1/

Screenshot (if possible)

Version

2.9.2

[mdrxy]

Also having issues with this. Thank you for the temporary solution!

[lubber-de]

Fixed by #3049
See your adjusted jsfiddle here https://jsfiddle.net/lubber/qkLs2xzp/1/