Using md-autocomplete in md-virtual-repeat

[brodecap]

Actual Behavior:

• What is the issue? * Input IDs for md-autocomplete appear to be reused in md-virtual-repeat leading to unexpected, repeated values on scroll.
• What is the expected behavior? md-autocomplete fields in the md-virtual-repeat should not pollute each other.

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue: http://codepen.io/anon/pen/VKxXBB
• Details: The CodePen illustrates the difference between md-autocomplete (first) and md-input (second). Fill in a few values for the autocomplete and scroll right to see the input IDs reused and the values repeated. The IDs for the raw md-inputs are not reused.

Angular Versions: *

• Angular Version: 1.5.8
• Angular Material Version: 1.1.1

Additional Information:

• Browser Type: * Chrome
• Browser Version: * 53
• OS: * macOS Sierra
• Stack Traces:

---

Shortcut to create a new CodePen Demo.
Note: * indicates required information. Without this information, your issue may be auto-closed.

Do not modify the titles or questions. Simply add your responses to the ends of the questions.
Add more lines if needed.

[devversion]

So I just took a look at this issue.

When using the md-autocomplete directive inside of a VirtualRepeatContainer the dropdown items might not update properly, because caching of the results is enabled by default.

The autocomplete will then show invalid dropdown items, because the VirtualRepeat only updates the scope bindings, rather than re-creating the md-autocomplete and the previous cached results will be used.

To avoid such problems ensure that the autocomplete does not cache any results.

<md-autocomplete
    md-no-cache="true"
    md-selected-item="selectedItem"
    md-items="item in items"
    md-search-text="searchText"
    md-item-text="item.display">
  <span>{{ item.display }}</span>
</md-autocomplete>

[brodecap]

Unfortunately, this did not resolve the issue. Please re-open and investigate further. The CodePen has been updated with md-no-cache="true" which appears to have no impact.

http://codepen.io/anon/pen/rrkqNy

Please let me know if I can provide any further information.

[ThomasBurleson]

@devversion - thoughts?

[devversion]

@brodecap Running your codepen and scrolling (horizontally) seems to show the correct values whenever I let the dropdown show up.

Do I miss anything or are you more talking about the "duplicating" id's?

[brodecap]

@devversion Thanks for looking into this; your time is very valuable to me.

The issue manifests when input values are selected. "Fill in a few values for the autocomplete and scroll right." You should see the values repeating as you continue to scroll. The dropdowns themselves do not appear to be an issue. Duplicate IDs may not be the cause of the issue (just an observation).

For example, select "0" in the first autocomplete. In my browser (width ~1700px), the value repeats in inputs 16, 32, 48, etc.

Please let me know if you require any further details and thanks again!