Fomantic UI - Dropdown

The patch version of the dropdown menu that fix the incorrect behavior s of dropdown menu.

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">
<div class="ui red buttons">
  <button class="ui button">
    <i class="code branch icon"></i>
    <span class="button-text">
      Merge Pull Request
    </span>
  </button>
  <div class="ui dropdown icon button">
    <i class="dropdown icon"></i>
    <div class="menu">
      <div class="item active selected">Merge Pull Request</div>
      <div class="item">Rebase and Merge</div>
      <div class="item">Rebase and Merge (-no off)</div>
      <div class="item">Squash and Merge</div>
    </div>
  </div>
</div>
<br>
<br>
<div class="ui very compact grid">
  <div class="row">
    <div class="item text gray eleven wide left floated column">
      <i class="icon icon-octicon">
        <svg class="svg octicon-alert" width="16" height="16" aria-hidden="true">
        <use xlink:href="#octicon-alert">
          <symbol viewBox="0 0 16 16" id="octicon-alert"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 000 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 00.01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></symbol>
        </use>
       </svg>
      </i>
      This branch is out-of-date with the base branch
    </div>
    <div class="item text five wide right floated column">
			<button class="ui button" data-do="update">
				<span class="item text">Update branch</span>
			</button>
		</div>
  </div>
</div>

CSS

body {
  padding: 2em;
}

.grid .row .icon {
  margin-top: 1.1rem;
}

.svg {
  display: inline-block;
  vertical-align: text-top;
  fill: currentColor;
}

JavaScript

$('.ui.dropdown').dropdown({
  });