Semantic-UI 2.2.1 - dropdown 'select' issue

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.1/semantic.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.1/semantic.css">
<div class="ui search top left pointing dropdown">
  <div className="text selected-item">
    <div>
      <i class="circular icon repeat"></i>
    </div>
  </div>
  <div class="menu">
    <div class="item" data-value="1" data-text="Option 1">
      <div title="Option 1" class="text">
        Option 1
      </div>
    </div>
    <div class="item" data-value="2" data-text="Option 2">
      <div title="Option 2" class="text">
        Option 2
      </div>
    </div>
    <div class="item" data-value="3" data-text="Option 3">
      <div title="Option 3" class="text">
        Option 3
      </div>
    </div>
  </div>
</div>

CSS

.dropdown .menu {
  width: 200px !important;
}

JavaScript

function onChange(val) {
	alert(val);
}

$('.ui.dropdown').dropdown({
  onChange: onChange,
  action: 'select'
});