semantic ui dropdown bug

HTML

<link rel="stylesheet" href="http://semantic-ui.com/dist/semantic.css">
<script src="http://semantic-ui.com/dist/semantic.js"></script>
<div class="ui form">
  <div class="ui field">
    <select id="foo" class="ui search dropdown">
    </select>  
  </div>
</div>
<p>
1. do this:
<button id="btn" class="ui blue button">
Add option
</button>
</p>
<p>
2. Now try any of these:
</p>
<ul>
<li><button id="ref1" class="ui red button">
Refresh using .dropdown()
</button>
</li>
<li>
<button id="ref2" class="ui green button">
Refresh using .dropdown('refresh')
</button>
</li>
<li>
<button id="ref3" class="ui orange button">
Removing classes from parent
</button>
</li>
</ul>

<p>
3. Now try to use the dropdown.
</p>

JavaScript

$('#foo').dropdown();
$('#btn').on('click', function() 
{
	$("#foo").append("<option value='beep'>Hi there</option>");
});
$('#ref1').on('click', function() 
{
  $('#foo').dropdown();
});
$('#ref2').on('click', function() 
{
  $('#foo').dropdown('refresh');
});
$('#ref3').on('click', function() 
{
  $('#foo').parent().removeClass('loading disabled');
});