Trouble with a Semantic UI/jQuery dropdown button using a block component in Ember JS-open source projects Semantic-Org/Semantic-UI

I’m having difficulty getting a Semantic UI (1.12.2) jQuery dropdown button located inside a block component to work in Ember JS (1.11.0). I think I understand the run loop issues with binding jQuery to elements in Ember but in this case I think something nuanced is happening that I am not aware of.

I have a template that calls my component like this:

{{#sui-button-dropdown colour="black" icon="retweet" text="Change Status"}}
    {{#each status in applicationStatuses}}
        
            
            {{status.description}}
        
    {{/each}}
{{/sui-button-dropdown}}

My component js code is as follows:

import Ember from 'ember';

export default Ember.Component.extend({
    didInsertElement: function() {
        Ember.run.scheduleOnce('afterRender', this, function() {
            this.$().dropdown({action: 'select'});
        });
    },
    actions: {
        changeStatus: function() {
            this.$().dropdown('toggle');
        }
    }
});

And my component .hbs view is:

    
    
    {{text}}
    
        {{yield}}
    

The “applicationStatuses” binding is pulled in via ember-data from an API asynchronously and so is a promise. I have placed the jQuery binding to .dropdown() inside a “didInsertElement” function and in order to make sure the promise has returned and the list has been rendered it is also scheduled for the next iteration of the run loop “afterRender”.

However, when I click the dropdown button no dropdown appears. There are no errors and the dropdown() function is definitely being called upon the dropdown button element as I have checked it. I suspect that I have missed something and the dropdown() jQuery method is binding before the AJAX call that returns the “applicationStatuses” collection, meaning the list hasn’t been populated when it runs.

If I take all of this out of the component and create it all in the parent controller/template the button dropdown works but components are the way to go so I’d appreciate any help anyone can offer.

Thanks.