bug(autocomplete): dropdown menu is too tall when only one result is present

[robertmesserle]

Working on recreating the issue in a CodePen, will add more details.

HTML

<md-autocomplete
    md-autofocus="true"
    md-delay="100"
    md-selected-item="selectedItem"
    md-selected-item-change="setItem()"
    md-items="item in itemMatcher(searchText)"
    md-item-text="item.title"
    md-search-text="searchText"
    md-min-length="3"
    placeholder="Enter item name"
    md-input-id="search-box"
    md-menu-class="search-box-results"
    ng-keypress="($event.which === 13)?search(searchText):0">
  <md-item-template>
    <span md-highlight-text="searchText" md-highlight-flags="^i">
      (ID: {{item.id}}) - {{item.title}}
    </span>
  </md-item-template>
  <md-not-found>
    No matches found for "{{searchText}}".
  </md-not-found>
</md-autocomplete>

[robertmesserle]

@ThomasBurleson This will have to go in before RC3 - will update when I am able to reproduce the issue.

[jayeshanandani]

This could be related to #5611 and #6668

[robertmesserle]

@jayeshanandani It could be, but I think it's a separate issue from those. This has come up before and I thought it was resolved at some point.

[devversion]

@robertmesserle I've created a codepen for you.

• http://codepen.io/DevVersion/pen/YqeBPL

[robertmesserle]

@devversion Have you been able to recreate the bug? I haven't been able to make it happen yet.

[devversion]

@robertmesserle Yes I think so - please take a look with my codepen and confirm.

[robertmesserle]

@devversion I tried the CodePen, but never saw the error occur =\

[ivoviz]

@robertmesserle Can confirm this bug has been there for a long time. I don't think you can reproduce it in @devversion's pen, since it requires a query for a non existent element first.

One way to reproduce it on the demo page (in the Basic Usage example):

• Type 'x' in the input field (there is no state starting with 'x')
• Backspace
• And now type any character that would give you a real result for example 'o' or 'l', so you can see the height is not calculated correctly)
• Notice, that the height rule won't be added to md-virtual-repeat-container

Also, there is another really annoying thing while calculating the size: adding border-top/border-bottom style on the li elements in the result list, the calculation doesn't seem to consider its width. This is particularly annoying, when we have a number of results that could fit into the max-height (225.5px), but there will be a vertical scrollbar, because of those borders.