first header dropdown issues

first header dropdown issues

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css">
<div class="ui form">
<div class="field">
  <div class="ui search selection dropdown">
    <input type="hidden" name="categoria">
    <i class="dropdown icon"></i>
    <div class="default text">O que você procura?</div>
    <div class="menu">
      <div class="header"><i class="building outline icon"></i> Imóveis</div>
      <div class="item" data-value="Quarto na Trindade">Quarto na Trindade</div>
      <div class="item" data-value="Quarto na Carvoeira">Quarto na Carvoeira</div>
      <div class="item" data-value="Quarto na Serrinha">Quarto na Serrinha</div>
      <div class="item" data-value="Quarto no Córrego Grande">Quarto no Córrego Grande</div>
      <div class="item" data-value="Quarto no Itacorubi">Quarto no Itacorubi</div>
      <div class="item" data-value="Quarto no Pantanal">Quarto no Pantanal</div>
    </div>
  </div>
</div>
</div>

CSS

body {
  
 margin:20px;
}

JavaScript

$(".ui .dropdown").dropdown({
  onShow: function() {
    $(this).find('.menu').not(':has(.item.active)').has('.header').animate({scrollTop: 0}, "fast");
       // $(this).find('.menu').has('.header').animate({ scrollTop: 0 }, "fast");
  }

});