Material: mdAutocomplete: md-selected-item-change triggers too often

[ghost]

md-selected-item-change triggers way to often, in the demo it triggers once on the initial click on the field ( it shouldn't happen because there is no point because nothing "changed"), and it triggers twice on clicking the X to empty the value.

[saurabh-p]

+1, This thing is causing a lot of trouble. Did anyone resolve this?

[abclearner2]

+1, really causing trouble

[arjun-pp]

+1, Please Fix this

[ashesh-0]

+1,Please fix the issue.

[hitigon]

looks like md-selected-item-change is triggered not only on the first selection, but when I clear the entire text and delete the last character in the text input.

[rgolea]

do a debounce on the model

[helmut-hoffer-von-ankershoffen]

@hitigon: how does one debounce the model of md-autocomplete? would be nice to share your workaround.

[roidayan]

@helmuthva I added ng-model-options="{debounce: 500}" to md-autocomplete
I found it here https://docs.angularjs.org/api/ng/directive/ngModelOptions

[paulredmond]

Can someone verify I am doing debouncing correctly with auto-complete chips? This issue is the closest thing I could find to trying to add debouncing to async chips.

For any Angular noobs like myself, if you are trying to debounce async <md-chips> with autocomplete you need to clear out the search text when using debouce, otherwise the search text will persist after selection. This is how I solved it, is this the best way?

Example of what you see if you add debounce model options:

Here is the code/js you need to clear out the search text:

<md-autocomplete
        md-selected-item="vm.selectedItem"
        md-search-text="vm.searchText"
        md-items="item in vm.filterChannels(vm.searchText)"
        md-item-text="item.name"
        placeholder="Search for channels"
        ng-model-options="{ debounce: 500 }"
        md-selected-item-change="vm.selectedChange()"
>
    <span md-highlight-text="vm.searchText">
        {{item.name}} ({{item.slug}})
    </span>
</md-autocomplete>

The trick here is the md-selected-item-change event needs to clear the value defined in md-search-text="vm.searchText". This is the controller attached to my own directive that includes <md-chips>:

class ChannelSelectController {
  // ...
  selectedChange() {
    this.searchText = '';
  }
}

[sohail85]

I am still having the issue with md-selected-item-change multiple time trigger using angular material's latest version (1.0.9)

[ZandorZ]

+1

[mihaivader]

+1

[resistancecanyon]

+1 I'm also facing the same issue. v1.0.9. Its calling the md-selected-item-change 2 times for me.
The issue is occurring while i sent the md-autocomplete object as funcName(selected,this) and modified the search text.
So this is a valid case where people will change the text.

Possible solution is to
1) add debounce in the calling function itself or
2) as @roidayan mentioned add ng-model-options="{debounce: 500}" which seems to not work for me.

[michalvankodev]

Hey Guys, I have a similar problem. When I programmatically change the value of md-selected-item it will trigger md-selected-item-change. In documentation it only says that

An expression to be run each time a new item is selected

But I haven't made any selection. Is there a way to stop triggering this event when I change value of the md-selected-item from my code?

[snitkoff]

+1

<md-autocomplete flex
    md-floating-label="Url"
    md-min-length="2"
    md-items="item in rc.findUrlsByText(searchText)"
    md-item-text="item.url"
    md-selected-item-change="rc.selectedItemChange(request, item)"
    md-search-text="searchText"
    ng-model-options="{ debounce: 500 }">
    <span md-highlight-text="searchText">{$ item.url $}</span>
</md-autocomplete>

With this config md-selected-item-change calling twice when I change search text and when I select another item. If added md-selected-item it will call 2 times when I change search text and 3 times when select another item.

[IsraelSistemas]

I have the same problem than you, when I select an item the first time works fine but when is the second time, third, etc, the function is executed many times, I have this code:

<md-autocomplete md-selected-item="layoutVM.selectedItem" md-search-text="layoutVM.searchText" md-items="item in layoutVM.getFilters(layoutVM.searchText)" md-item-text="item.Name" md-min-length="0" md-selected-item-change="layoutVM.addFilters(item.Name)" placeholder="Add a filter..."> <md-item-template> <span md-highlight-text="layoutVM.searchText" md-highlight-flags="^i">{{item.Name}</span> </md-item-template> </md-autocomplete>

Anyone here could solve this issue?

[rochapablo]

+1

[kikocastro]

+1

[ThomasBurleson]

@crisbeto - Reopening... can you investigate.

[Loubot]

+1

[devversion]

Thanks to @divashutin for his codepen demo in #4919

[devversion]

So after some further investigation at that issue and talking to @topherfangio, we figured out that the issue is only valid for versions older than v1.0.7

https://codepen.io/anon/pen/wKoOQE

@rochapablo @kikocastro Are there any other steps to reproduce that issue?

[rochapablo]

@DevVersion I'm using the v1.0.7 and seems that the only difference is that I do a post request every change md-selected-item-change where things tuning into hell having a lot of requests.

Anyway I changed the way of doing this, using only a button save, so let's help @kikocastro have something better.

Thank you for your time.

[devversion]

@rochapablo Alright. I will close that issue for now, because we were not able to reproduce it anymore after v1.0.7.

If anyone provides a working codepen, I can reopen the issue. Thanks in advance.

[vileppanen]

Hello,
It seems I'm having the same issue currently with angular 1.5.11 and angular-material 1.1.3. In my local dev env if I select item from autocomplete list the md-selected-item-change triggers as expected. Then if I alter the input field by one character, it triggers again. If I remove another character it does not trigger, only the md-search-text-change function triggers.

Here's forked pen where I've changed only the referenced library versions:
https://codepen.io/vileppanen/full/GWEvMV/

[topherfangio]

I am confused. This feels like the correct behavior. If you select an item, then alter the text, the item should no longer be selected (so we fire a SelectedItemChanged event with undefined as it can't be found). Then, as you change the text, we only update the text because no item has been selected.

@vileppanen Can you expand on what you would expect to happen?

[vileppanen]

@topherfangio Ah yes, this actually clarifies it. I was expecting it to work as an "on-select" trigger, which would only execute when user selects an item from the list. I might have been misreading the specs.

[luncht1me]

@vileppanen That should be the expected behavior.
@topherfangio, It was very confusing that the function would fire again when the item becomes undefined. I don't think that's a really good idea tbh. It's caused some headache here and initially led me to believe the function was firing anytime I changed the text field.

Personally, it makes more sense to fire the attached method when a change happens to an actual item. undefined isn't really an item from the autocomplete list, so the item hasn't really been changed, you know? I suppose there are use cases where someone would want to handle emptying the field, but by default it is a little confusing especially since the documentation doesn't hint at how it currently operates.