add() method messes with selection

[David Krijgsman]

I'm trying to dynamically add an option by doing the following.

HTML:

<select id="test" name="test">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

<button>Add option 4</button>

Javascript:

<script>
jQuery(document).ready(function()
{
    jQuery('#test').dropkick();

    jQuery('button').on('click', function(e)
    {
        jQuery('#test').dropkick('add', 'Option 4');
    });
});
</script>

The option gets added, both in the DOM select as well as in the Dropkick options. However, when I try to select the new option ('Option 4'), 'Option 3' is marked as selected. When I select 'Option 3', 'Option 4' gets selected. If I add multiple options, the option directly above it gets selected.

Everything is fine after I call the refresh() method. Is that the intended use? Or is it supposed to refresh automatically?