Angular Material Tabs and autocomplete

Question

I use md-tab for my html page and in each tab i use an autocomplete component as follows:

<md-autocomplete                        
            md-selected-item="selectedItem"
            md-search-text-change="searchTextChange(searchText)"
            md-search-text="searchText"
            md-selected-item-change="selectedItemChange(item)"
            md-items="item in querySearch(searchText) | orderBy:'text'"
            md-item-text="item.text"
            md-min-length="0"
            placeholder="Easy filter"
            md-menu-class="autocomplete-custom-template">
            <md-item-template style="background-color:white;">
                <span class="select-title">
                    <span class="item-tags"> {{item.text}} </span>
                </span>
            </md-item-template>
        </md-autocomplete>

I use that same code in my all tabs. And the problem is: when i click on autocomplete component, i get two lists: one is under my autocomplete box (which is normal) and one is at the left hand side, which is the list of the another autocomplete box in that other tab.

Why is that showing? Is there a work-around?

Answer 1

I tried to reproduce with Angular 1.3.0 and Angular-Material 0.11.4 and works fine.

You can try put a md-input-id="theInputId" in each md-autocomplete. As last resort, link each autocomplete with each tab using the autocomplete id and tab $index, disabling autocompletes of inactive tabs.