Bootstrap-select: Bootstrap Select plugin not displaying dynamically added content correctly

[SoftCircuits]

It's hard to be certain this is a bug. Perhaps I've missed something.

I'm dynamically populating a Bootstrap select plugin using JavaScript/jQuery, before it's displayed in a Bootstrap modal.

var $select = $selectGroup.find('select');
$select.empty();
filter.options.forEach(function (item) {
    var $option = $('<option value="' + item.Value + '">' + item.Text + '</option>');
    if (filter.selectedIds.includes(item.Value))
        $option.prop('selected', true);
    $select.append($option);
});
@* Set filter type *@
$modal.find('[name=ftype]').val(filter.type);
@* Reload data from select element *@
$('.selectpicker').selectpicker('refresh');
$modal.modal();

Everything is working except the selected items don't show in text portion of the list.

As you can see I'm refreshing the control before I open the modal. As soon as I click on an option, the text portion displays the correct thing. Only after it's initialized and displayed does it not show the selected items.

And here is the markup I'm modifying.

<div class="row">
    <div class="col-md-12 select-items">
        <div class="filter-options form-group">
            <label class="control-label">Rail Interchanges</label>
            <select class="selectpicker form-control" multiple name="fids"></select>
        </div>
    </div>
</div>

[SoftCircuits]

It looks like if I call the refresh method, followed by calling the render method, the control appears as it should. I'm not clear one why both methods are used or if I'm calling them in the correct order. But so far it seems to work.