Components: [MatAutocomplete] options update delayed

Created on 27 Apr 2018 · 3Comments · Source: angular/components

Bug, feature request, or proposal:

Bug

What is the expected behavior?

When updating an autocomplete's options array with dynamic data it should update the UI immediately.

What is the current behavior?

The UI is not updated until the next input event ie keypress

What are the steps to reproduce?

https://stackblitz.com/edit/mat-autocomplete-delay

I've had issues with viewing it in the editor because of when the google api is loaded. View in a separate window.

What is the use-case or motivation for changing an existing behavior?

I'm filling out an autocomplete with data from google's place api. I can retrieve the data very quickly, but the list will not update right away.

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

Angular CLI: 1.7.2
Node: 8.9.4
OS: win32 x64
Angular: 5.2.7
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.2.3
@angular/cli: 1.7.2
@angular/material: 5.2.3
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.1
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0

Is there anything else we should know?

Tested in Chrome and FF

Side Note: I'm using the value of the autocomplete to populate my form. The labels on the mat-input do not move or animate and they stay in their placeholder position until I remove the input's focus by click or tabbing.

I tried recreating it on the stackblitz as well but I was unsuccessful. It did however have a jumpy animation. Not sure if it only works due to the simplicity of the example.

Source

JDillon522

👍1

Most helpful comment

The Google API you're using probably runs outside NgZone. Call cdRef.markForCheck() or wrap your callback code in zone.run() to re-enter zone:

this.autocompleteService.getPlacePredictions({ input: this.addressSearch }, (results) => {
       this._ngZone.run(() => { this.placeOptions.next(results); });
});

SpeedoPasanen on 29 Apr 2018

👍2 🎉1

All 3 comments

The Google API you're using probably runs outside NgZone. Call cdRef.markForCheck() or wrap your callback code in zone.run() to re-enter zone:

this.autocompleteService.getPlacePredictions({ input: this.addressSearch }, (results) => {
       this._ngZone.run(() => { this.placeOptions.next(results); });
});

SpeedoPasanen on 29 Apr 2018

👍2 🎉1

Fantastic! I didnt even know about NgZone. I'll have to look more into this. But this completely solved my issue. Thanks

JDillon522 on 29 Apr 2018

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}