Semantic-UI Dropdown

[bryantbiggs]

Hello Manuel - I am trying to use Semantic-UI similar to how you have your documentation examples however I cannot get the dropdown to render correctly and it appears that you are unable to as well. If I don't initialize the dropdown (either this.dropdown.dropdown() in onRendered() or semantics way with $('.ui.dropdown').dropdown(); then it works correctly and I can load my userform with data from a collection.

You can see the difference below - top dropdown is from Semantic's site with the dropdown rendered correctly, the bottom is from your documentation site. I just wondered if you had a solution for this as I would prefer to stay with the html semantics of using a <select> instead of a bunch of custom div tags.

As well as the multiple-selection dropdown:

[bryantbiggs]

I needed to add a delay to allow the data to be ready for render. Without using the Semanitc UI dropdown, ViewModel worked correctly, but with SUI dropdown and VM the dropdown was always left blank. After adding in a time delay to allow the data to be ready before render fixed this issue.

onRendered: function(template) {
        // Give some time for the data to be ready
        setTimeout(() => {
            $('.ui.dropdown').dropdown();
        }, 1);
    }

[arggh]

@bryantbiggs Could you show the rest of the code, specifically how you get the data for the dropdown options?

[bryantbiggs]

@arggh applications are the selection choices for the dropdown and application is the value selected by the user.

Template.RequiredInfo.viewmodel({
    project_name: this.project_name,
    applications: ['Cross Tube', 'Head Restraint Tilt', 'Lumbar Support', 'Armrest'],
    application: this.application,

    onCreated: function(template) {
        var project_id = FlowRouter.getParam("projectId");
        var that = this;

        this.templateInstance.subscribe('designs', function() {
            var doc = DesignsCollection.findOne({_id: project_id});
            (doc && doc.project_name) ? that.project_name(doc.project_name) : that.project_name('');
            (doc && doc.application) ? that.application(doc.application) : that.application('');
        });
    },

    onRendered: function(template) {
        // Give some time for the data to be ready
        setTimeout(() => {
            $('.ui.dropdown').dropdown();
        }, 1);
    }
});

[arggh]

And what about the template code where the component html resides?

[arggh]

I made a reproduction similar to your code (though I haven't seen the template code yet) where I use an array of Strings declared in the ViewModel as source for the dropdown options, initialize a dropdown in the onRendered and it seems to work as expected.

Check it out here and compare to your solution, maybe you'll find the problem: https://github.com/arggh/vm-sui-dropdown-test

[arggh]

Also worth noting is your Semantic UI version, they did a lot of fixes for the dropdown element in Version 2.2.3