выпадающий список семантического пользовательского интерфейса не показывает выбранный элемент

Question

Я использую выпадающий список семантического пользовательского интерфейса.

При загрузке страницы я устанавливаю выбранное значение.

Проблема в том, что при открытии выпадающего меню по умолчанию semantic-ui показывает первыеэлементы раскрывающегося списка и не отображают выбранное значение.

Если вы выберете другое значение, то новая раскрывающаяся позиция соответствует выбранному значению.

Есть ли способпоказывать выбранный элемент при первом открытии раскрывающегося списка.

раскрывающийся список

$('.dropdown').dropdown();
$('.dropdown').dropdown( 'set selected', '10');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.3/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
<div class="ui scrolling dropdown">
  <div class="text">10</div>
		<i class="dropdown icon"></i>
		  <div class="menu">
		    <div class="item" data-value="1">1</div>
        <div class="item" data-value="2">2</div>
        <div class="item" data-value="3">3</div>
        <div class="item" data-value="4">4</div>
        <div class="item" data-value="5">5</div>
        <div class="item" data-value="6">6</div>
        <div class="item" data-value="7">7</div>
        <div class="item" data-value="8">8</div>
        <div class="item" data-value="9">9</div>
        <div class="item" data-value="10">10</div>
      </div>
	</div>

Answer 1

После некоторого исследования я решил использовать .index () и .scrollTop () и выпадающий обратный вызов .onShow

$('.dropdown').dropdown();
$('.dropdown').dropdown('set selected', '10');
$('.dropdown').dropdown({
  onShow: function(value, text) {
    setTimeout(function() {
      var preSelected = $('#dd > div.item.active.selected').index('.item');
      $('#dd').scrollTop((preSelected - 2) * 36);
    }, 100);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.3/semantic.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>

<div class="ui scrolling dropdown">
  <div class="text">10</div>
  <i class="dropdown icon"></i>
  <div class="menu" id="dd">
    <div class="item" data-value="1">1</div>
    <div class="item" data-value="2">2</div>
    <div class="item" data-value="3">3</div>
    <div class="item" data-value="4">4</div>
    <div class="item" data-value="5">5</div>
    <div class="item" data-value="6">6</div>
    <div class="item" data-value="7">7</div>
    <div class="item" data-value="8">8</div>
    <div class="item" data-value="9">9</div>
    <div class="item" data-value="10">10</div>
  </div>
</div>