dropdown clear doesn't work in callback

dropdown clear doesn't work in callback

by Bob Marley

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.js"></script>
<p style='color:red;'>
click the button, dropdown 'set exactly' doesnt work
</p>
<form class="ui form">
  <div class="field">
    <label for="test">Seasons</label>
    <div class='ui multiple search selection dropdown seasons'>
      <input name="seasons" id="seasons" value="winter,spring,summer" type="hidden">
      <i class="dropdown icon"></i>
      <div class="default text">Select</div>
      <div class="menu">
        <div class="item" data-value="winter">Winter</div>
        <div class="item" data-value="spring">Spring</div>
        <div class="item" data-value="summer">Summer</div>
        <div class="item" data-value="N/A">N/A</div>
      </div>
    </div>
  </div>
</form>
<p>

</p>
<button class="ui button" type="button">
set exactly NA
</button>

CSS

body {
  margin : 20px;
}

JavaScript

$('.ui.dropdown.seasons').dropdown();

 $('.ui.button').on('click', function(){
    $('.seasons').dropdown('set exactly',['N/A']); 
 });