Components: Feature request : Autocomplete

[diicar]

Bug, feature request, or proposal:

feature request

What is the expected behavior?

Display the options when ajax's response comes back

What is the current behavior?

I have to focus out the md-input-container and to focus again to see the proposed options

What are the steps to reproduce?

Can't make to work plunker with

Console error:
_Can't bind to 'formControl' since it isn't a known property of 'input'_

Plunker template: http://plnkr.co/edit/Vk3UGKnxKGRg3bNuKVHa?p=preview

Please see the plunker, maybe I'm doing something wrong...
Thank you

[chouclee]

@diicar @kara http://plnkr.co/edit/3I7FW0EhLa90hVzExVNq?p=preview
I just created one working plunker. Use the reactive one to reproduce this bug.

It was actually working before the commit fcc7d7fffa40750bdf662aa51c9bfa278674fd7d

[kara]

@diicar In the plunker, it looks like you forgot to import the ReactiveFormsModule, so the directive isn't recognized.

I was able to see what you mean once I added it though. If you wait a few seconds and then open the panel, everything is fine. But if you try to open the panel before the async result comes back, the panel closes itself immediately because the option list is empty. You can fix this by querying for the trigger and calling its openPanel() method as soon as the option list populates.

It's not great to require you to do that though. Perhaps we should just keep the panel open when the option list is empty and just hide it... looking into a better way to handle this.

[diicar]

@chouclee @kara I see, thank you 👍
@kara you understood my problem perfectly.
I found a workaround, as I have two inputs consuming the same source.

@ViewChildren(MdInputDirective) inputs: QueryList<MdInputDirective>; // length === 2
_startPlaces: Place[] = [];
@Input()
set startPlaces(places: Place[]) {
  if (this.inputs) {
    this.inputs.last.focus();
    this._startPlaces = places;
    this.inputs.first.focus();
  }
}
get startPlaces(): Place[] {
  return this._startPlaces;
}

It works, but I believe no one likes this solution.

Could you give me an example using the query please? I tried like this

<input mdInput [formControl]="startCtrl" #starts [mdAutocomplete]="start" ...>
...

@ViewChild('starts') starts;
@Input()
set startPlaces(places: Place[]) {
  if (this.starts) {
    this.starts.openPanel()
    this._startPlaces = places;
....

Anyway, thank you very much.

[kara]

@diicar Yeah, I'm working on a better solution right now. The best solution will probably come a bit later when we add more robust async support, with the progress bar, "not found" message, etc.

Regarding the query, you'll have to wait for https://github.com/angular/material2/pull/2937 in order to refer to the MdAutocompleteTrigger. If you use a regular template variable, you'll get the ElementRef and not the trigger directive instance. But once that's merged, a workaround would be to do something like this:

@ViewChild(MdAutocompleteTrigger) trigger: MdAutocompleteTrigger;

Then call this.trigger.openPanel() whenever your data comes in.

[diicar]

@kara This is very good, the best is coming. 🥇
I believe, either this one #2997 or this one #2937 using the trigger openPanel() should be enough to solve.
I think I can close this issue.
Thank you.

[gilad-vatbox]

@kara, as of 2.0.0-beta.2 how can I get the event that is triggered when the user selects one of the options in the list?

[diicar]

@gilad-vatbox

this.yourCtrl = new FormControl();
constructor() {
  this.yourCtrl.valueChanges()
    .filter(val => val && typeof val === 'object')
    .subscribe(value => {
       // do something() 
   })
}

[gilad-vatbox]

@diicar thanks, but that's my current state.
This gives me the stream of values that the user enters.
i.e. if the user wants to choose the name 'Dave' from a list of names the observable will stream:
'D', 'Da', 'Dav', 'Dave'.
And I need just the 'Dave'. I need to know the value that the user chose from the list.

[diicar]

@gilad-vatbox I see, your values is a list of string?

[gilad-vatbox]

@diicar no, its an array of objects with a 'name' propery

[kara]

@gilad-vatbox I think what you're looking for is optionSelections. It's on the trigger API. We just submitted a PR that merges all option selection events into one observable, so you don't have to do this yourself.

[gilad-vatbox]

@kara yes! any idea when will this be included in a release? Or whether I have a way of accessing it now?

[kara]

If you use material-builds rather than the latest release, it should be in there now. It's based on master.

npm install --save https://github.com/angular/material2-builds.git

[mbenedettini]

For what it's worth: I faced this same issue but it was being caused by a request being made outside Angular (a call to google maps api like described here) and the panel wasn't being shown when results came back.

I had to send results to the observer being used to populate md-option within NgZone.run():

@Injectable()
export class MyService {
    constructor(
        private zone: NgZone
    ) { }

// method in myservice.ts which returns an observer used in *ngFor of md-option
getResults() {
    return Observable.create(observer => {
        // [...]
        this.zone.run(() => {
            observer.next(results);
            observer.complete();
        });
        // [...]
    });
}

[angular-automatic-lock-bot[bot]]

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._}