Semantic-ui: [Dropdown] 'set selected' does not recognize dynamically added items?

[andreyvk]

Hi,

Here's a fiddle to reproduce the issue, if it's an issue of course. I have doubts that I am doing something wrong here. But anyways...

Here's the problem:

1. We have an existing dropdown
2. menu items in dropdown change dynamically and we need to select a new value.
3. But for some reason .dropdown("set selected", "new value") does not kick in

[jlukic]

Mutation observers (which refresh the selector cache) are asynchronous event callbacks which must wait for the browser to fire mutation events. If you need to use a value immediately you will manually have to call

$('.ui.dropdown').dropdown('refresh');

http://jsfiddle.net/51489p1k/

[andreyvk]

Understood. Thanks @jlukic

[avalanche1]

seems like an undocumented feature

[jlukic]

Yes, there's a few features like that which are just designed to allow developers to be lazy and everything can 'just work'.

[achimkoellner]

The refresh-method doesn't seem to work if the source element was a select element:

http://jsfiddle.net/nfsfb87y/1/

Couldn't find any documentation on set selected.
If I use a timeout after I append options to the select box it works.

I think the request method sould maybe return a promise such as

$("[name=productIds]").dropdown("refresh").then(function() {
    $("[name=productIds]").dropdown("set selected", "3"); 
});

I looked at the refreshSelectors method #4486 and to me it looks like a select element wouldn't be refreshed, is that possible?

[sarbona]

I had the same problema as achimkoellner.
The "set selected" didn't work after dynamically fill a select element.
I tried the "refresh" before the "set selected" method but still didn't work.
The only solution was to use a setTimeout to call "set selected" async.

for (var id in championships) {
var $option = $("<option value=\"" + id + "\">" + championships[id].name + "</option>");
$select.append($option);
}
$select.dropdown('refresh');
if (defaultValueId)
setTimeout(function () {
$select.dropdown('set selected', defaultValueId);
}, 1);

[JotaMiller]

+1 for @sarbona workaround.

Works like a charm

[milkymura]

+1 for @sarbona . worked for me! :)

[rpsirois]

I had the same problem. I also couldn't dynamically add options with value="" (empty string).
+1 @sarbona's workaround

[basistam]

+1 @sarbona Isn't this a bug?

[ghost]

+1 @sarbona

[dodyeast]

Cool.. +1 @sarbona

[SantiagoMarcelino123]

+1 @sarbona saved my day

[victor-rocha]

+1 @sarbona thanks, bro!

Edit: Just put the code inside your ajax callback, if your doing so.

[douglasg14b]

This would be good to document, it's one of the many "gotchas" I've found when attempting to use semantic UI with angularjs.

[Jameron]

Is setTimeout() still the only way to get this to work? Whenever I see setTimeout() as the accepted solution I want to jump off a cliff.

[andreyvk]

@Jameron no, if you look at earlier posts you'll find that you can use $(".ui.dropdown").dropdown("refresh");

[Jameron]

What about if I just dynamically added a list item?

$('#entity').dropdown('refresh');
$('#entity').dropdown('set selected', newEntity[0].id);

The set selected is failing. If I run it in console it works, seems like it needs a timeout or promise to stop async?

[andreyvk]

Then it's setTimeout(), i guess. I myself have a bunch in the code already. Nowhere to run

[tribaltrading]

Instead of setTimeout, you can also put your own mutation observer on the select element you're using as a dropdown like so: http://jsfiddle.net/XfxJu/2/. The link shows how mutation observer works, it's not a complete example.

[jaswinderahuja]

I am also facing same issue as if I am using remote content in dropdown list dynamically in that case

$('.remote.ui.dropdown').dropdown({
apiSettings: {
url: '/api/call'
},
filterRemoteData: true
});

$('.remote.ui.dropdown').dropdown('refresh');
$('.remote.ui.dropdown').dropdown('set selected',"value");

is not working

Please help me to understand what I am doing wrong

[jaswinderahuja]

I want to prepopulate the value when form is loading and also to give the option to the user to select the option from given list which is coming remotely using apiSetting parameters.

$('.remote.ui.dropdown').dropdown({
apiSettings: {
url: '/api/call'
},
filterRemoteData: true
});

$('.remote.ui.dropdown').dropdown('refresh');
$('.remote.ui.dropdown').dropdown('set selected',2);

[guillaume-ferry]

+1 for @sarbona ! Thanks a lot !

[coder8keyboard]

I use Aurelia framework. Both refresh and timeout did not work for me due to async operations. I had to wrap my code with a Micro Task Queue to make it work. It allowed the 'set selected' method to run right after getting ajax data.