[Dropdown] Search dropdowns don't hide dividers

[designosis]

Here is a standard ui search selection dropdown in Semantic UI v2.3:

Take note of the dividers (such as the one above "Other".

Now observe what happens after entering pote in search:

See how the two dividers are still there below "Potential Employee"? This gets pretty gnarly with larger lists.

I'd suggest hiding .ui.search.selection.dropdown > .menu > .divider via javascript whenever search is triggered, and un-hiding them when it's empty.

HTML:

<div class="field">
  <label>Phone Type</label>
  <div class="ui search selection dropdown">
    <input type="hidden" name="type_id">
    <i class="dropdown icon"></i>
    <div class="default text">Phone Type</div>
    <div class="menu">
      <div class="item" data-value="1">Sales Lead</div>
      <div class="item" data-value="2">Distributor</div>
      <div class="item" data-value="3">Potential Distributor</div>
      <div class="item" data-value="4">Postal</div>
      <div class="item" data-value="5">Freight</div>
      <div class="item" data-value="6">Maintenance</div>
      <div class="item" data-value="7">Potential Employee</div>
      <div class="divider"></div>
      <div class="item" data-value="8">Family</div>
      <div class="item" data-value="9">Friend</div>
      <div class="item" data-value="10">Douchebag</div>
      <div class="divider"></div>
      <div class="item" data-value="1000">Other</div>
    </div>
  </div>
</div>

JS:

$('.ui.search.selection.dropdown').dropdown({
  // true, false and 'exact' all have this issue
  fullTextSearch: 'exact'
});

[y0hami]

I agree with this, I have created a jsfiddle to to replicate the issue https://jsfiddle.net/52yb48uh/

[jlukic]

This use case isnt specifically supported in docs. This would be a feature enhancement.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

[designosis]

Bump.