Components: Autocomplete formcontrol valueChanges fired when user select option

Created on 19 Jan 2019 · 5Comments · Source: angular/components

What is the expected behavior?

Autocomplete formcontrol valueChanges should not be fired when user select option

What is the current behavior?

Autocomplete formcontrol valueChanges fired when user select option

What are the steps to reproduce?

Please, look at this (open console): https://stackblitz.com/edit/angular-8zucqs?file=app/autocomplete-display-example.ts

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular - 7.2.0, Material - 7.2.1

Is there anything else we should know?

Bros, i need this functionality.

materiaautocomplete

Source

bohdanzhylavskyi

👍2

Most helpful comment

If you look at an example to autocomplete component, you will see something like this:

constructor() {
    this.filteredStates = this.stateCtrl.valueChanges
      .pipe(
        startWith(''),
        map(state => state ? this._filterStates(state) : this.states.slice())
      );
  }

I'm as a regular developer, think that is a place where I can make a call to API. So I place code into map pipe. If I type something in input, that call will be fired (it is OK), but when I select an option, that call will be fired again (valueChanges). So if it isn't an issue, please, give me example how to avoid it.

bohdanzhylavskyi on 20 Jan 2019

👍2

All 5 comments

I'm not sure I get what the issue is. When is it supposed to fire valueChange event, aside from when the value has changed?

crisbeto on 20 Jan 2019

If you look at an example to autocomplete component, you will see something like this:

constructor() {
    this.filteredStates = this.stateCtrl.valueChanges
      .pipe(
        startWith(''),
        map(state => state ? this._filterStates(state) : this.states.slice())
      );
  }

bohdanzhylavskyi on 20 Jan 2019

👍2

If you look at an example to autocomplete component, you will see something like this:
constructor() {
    this.filteredStates = this.stateCtrl.valueChanges
      .pipe(
        startWith(''),
        map(state => state ? this._filterStates(state) : this.states.slice())
      );
  }
I'm as a regular developer, think that is a place where I can make a call to API. So I place code into map pipe. If I type something in input, that call will be fired (it is OK), but when I select an option, that call will be fired again (valueChanges). So if it isn't an issue, please, give me example how to avoid it.

When you select option, valueChanges fired with [Object], try filter

constructor() {
    this.filteredStates = this.stateCtrl.valueChanges
      .pipe(
        startWith(''),
        filter(x => typeof x === 'string'),
        map(state => state ? this._filterStates(state) : this.states.slice())
      );
  }