I want to use a WebDropDown with checkbox multiselection. I have an underlying string array of data that needs to match the ticked checkboxes.

There are a few issues I've encountered:

1. the first few times I click the arrow to open the dropdown, nothing happens. There's no error in the browser console either, so I'm not sure. It seems the first time the page loads, I need to click at least thrice for the dropdown to actually appear.
2. every time I check or uncheck an item, the dropdown closes. It's slightly annoying to quickly check multiple items this way.
3. I can update the selection from JS, but it only seems to affect the checkboxes. The dropdown text itself doesn't get updated.

The dropdown code itself is simply:

<ig:WebDropDown ID="MyDropDown" EnableMultipleSelection="true" MultipleSelectionType="Checkbox"
                runat="server" Width="200px" />

In various places, I need to updated the selection from the data source. The JS to do that is:

if (dataSource != undefined) {
    var ddItems = $IG.WebDropDown.find("cph_mainpage_MyDropDown").get_items();

    for (var i = 0; i < ddItems.getLength(); i++) {
        var ddItem = ddItems.getItem(i);

        if (dataSource.includes(ddItem.get_text()))
            ddItem.select();
        else
            ddItem.unselect();
    }
}

I've also tried calling activate() and inactivate() on the items, and calling invalidateCache() on the dropdown.

I'm hoping that for issue 2, there's simply some "allow selecting multiple items in one go" property I need to set somewhere, and for 3, i can somehow force the drop-down to refresh its state from the items.