<ui-select
  ng-model="field"
  ui-select-focus-on="focus-field"
  on-select="onSelect({ field: field })"
  uis-open-close="resetLimit()"
>
  <ui-select-match placeholder="{{ ::'common.ui.filterEditor.fieldsPlaceholder' | i18n: { defaultMessage: 'Fields…' } }}">
    <span
      class="uiSelectMatch--ellipsis"
      tooltip="{{$select.selected.name}}"
    >
      {{$select.selected.name}}
    </span>
  </ui-select-match>
  <ui-select-choices
    class="uiSelectChoices--autoWidth"
    repeat="field in fieldOptions
      | filter:{ name: $select.search }
      | orderBy:'name'
      | sortPrefixFirst:$select.search:'name'
      | limitTo: limit"
    group-by="getFieldIndexPattern"
    kbn-scroll-bottom="increaseLimit()"
  >
    <div ng-bind-html="field.name | highlight: $select.search"></div>
  </ui-select-choices>
</ui-select>
