Select2 v4.0.0-rc2 - Dropdown opening direction

If there is not enough space on the bottom will it open up at the top?

by notacouch

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/css/select2.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/js/select2.min.js"></script>
<form id="move">
    <p>Distance from top: <input type="text" name="distance" value="200px" /> <input type="submit" /></p>
</form>

<form id="reset">
    <input type="submit" value="re-insert dropdowns" />
</form>

<form id="float">
    <input type="submit" value="Toggle float" />
</form>

<p id="it">
Native dropdown: <select name="state">
	<option value="">---------------</option>
	<option value="Alabama">Alabama</option>
	<option value="Alaska">Alaska</option>
	<option value="Arizona">Arizona</option>
	<option value="Arkansas">Arkansas</option>
	<option value="California">California</option>
	<option value="Colorado">Colorado</option>
	<option value="Connecticut">Connecticut</option>
	<option value="Delaware">Delaware</option>
	<option value="District of Columbia">District of Columbia</option>
	<option value="Florida">Florida</option>
	<option value="Georgia">Georgia</option>
	<option value="Hawaii">Hawaii</option>
	<option value="Idaho">Idaho</option>
	<option value="Illinois">Illinois</option>
	<option value="Indiana">Indiana</option>
	<option value="Iowa">Iowa</option>
	<option value="Kansas">Kansas</option>
	<option value="Kentucky">Kentucky</option>
	<option value="Louisiana">Louisiana</option>
	<option value="Maine">Maine</option>
	<option value="Maryland">Maryland</option>
	<option value="Massachusetts">Massachusetts</option>
	<option value="Michigan">Michigan</option>
	<option value="Minnesota">Minnesota</option>
	<option value="Mississippi">Mississippi</option>
	<option value="Missouri">Missouri</option>
	<option value="Montana">Montana</option>
	<option value="Nebraska">Nebraska</option>
	<option value="Nevada">Nevada</option>
	<option value="New Hampshire">New Hampshire</option>
	<option value="New Jersey">New Jersey</option>
	<option value="New Mexico">New...

CSS

#it { position: relative; }

JavaScript

jQuery(document).ready(function(){
    var $it = jQuery('#it');
    var selects = $it.html();
    var $distance = jQuery('input[name=distance]');
    
    jQuery('#move').on('submit', function(e) {
        e.preventDefault();
        $it.css('top', $distance.val());
    });
    
    jQuery('#reset').on('submit', function(e) {
        e.preventDefault();
        $it.html(selects);
        jQuery('select[name=more_states]').select2();
    });
    var float = false;
    jQuery('#float').on('submit', function(e) {
        e.preventDefault();
        float = !float;
        $it.css('float', float ? 'left' : 'none');
    });
    
    var selects = $it.html();
    jQuery('select[name=more_states]').select2();
});