Ionic-Angular drop-down querying even after the selection

Question

I am implementing a drop-down to list as i type in a column of a form. I have an observable running on this field to look for changes and query the database for available items. Everything works fine but if i select the item from the listed drop down, its still fires a query for that selected item since both valueChanges and distinctUntilChanged() will return true.

For example if i type java, the drop-down lists java and javascript and if i select javascript from the list , it goes ahead and query the db for javascript.

This sounds silly, but how to avoid this, I am entirely new to the UI side, any help is appreciated.

this.myForm.controls['myDropDownDesc'].valueChanges
    .debounceTime(500)
            .distinctUntilChanged()
            .subscribe(
            (newValue) => {
                this.myMethodCallingHttpGetToGetDropDownValues(newValue);
            });

<ion-item>
<ion-label floating>My Drop DOWN field</ion-label>
<ion-input formControlName="myDropDownDesc"  value={{myObject?.myDropDownDescription}}>
</ion-input>
</ion-item>

Answer 1

You can set form control value with emitEvent:false on selecting option from dropdown list so it won't fire that valuechange event.

Onselect or Onchange event of list you can call a function with below lines.

this.myForm.controls['myDropDownDesc'].patchValue(selectedDropDownValue, {emitEvent:false});