Skip to content

[AutoComplete] Trigger's optionSelections throw error when no md-options provided #4616

Closed
@wpcfan

Description

@wpcfan

Bug, feature request, or proposal:

I have the following setup, and the options are generated on the fly e.g. when users types 2 characters and the search service return the result

<!--html-->
    <md-input-container class="full-width">
      <input mdInput placeholder="type the email here" formControlName="ownerSearch" [mdAutocomplete]="assignee">
    </md-input-container>
<md-autocomplete #assignee="mdAutocomplete" [displayWith]="displayUser">
  <md-option *ngFor="let item of searchResults | async" [value]="item">
    {{item.name}}
  </md-option>
</md-autocomplete>
this.searchResults = this.form.controls['ownerSearch'].valueChanges
      .startWith(null)
      .debounceTime(300)
      .distinctUntilChanged()
      .filter(s => s && s.length>1)
      .switchMap(str => this.service.searchUsers(str));
this.trigger.optionSelections)
      .subscribe(c => console.log(JSON.stringify(c)));

and when I was trying to use triggers, it throw exceptions

ERROR TypeError: Cannot read property 'options' of undefined
    at MdAutocompleteTrigger.get [as optionSelections] (material.es5.js:19940)
    at NewTaskComponent.webpackJsonp.603.NewTaskComponent.ngOnInit (index.ts:84)
    at checkAndUpdateDirectiveInline (core.es5.js:10793)
    at checkAndUpdateNodeInline (core.es5.js:12216)
    at checkAndUpdateNode (core.es5.js:12155)
    at debugCheckAndUpdateNode (core.es5.js:12858)
    at debugCheckDirectivesFn (core.es5.js:12799)
    at Object.eval [as updateDirectives] (NewTaskComponent_Host.html:1)
    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:12784)
    at checkAndUpdateView (core.es5.js:12122)

I took a look at the autocomplete source code, it seems you did not handle the situation that options are null

  /** Stream of autocomplete option selections. */
  get optionSelections(): Observable<MdOptionSelectionChange> {
    return Observable.merge(...this.autocomplete.options.map(option => option.onSelectionChange));
  }

What is the expected behavior?

Even options are null, we are allowed to use streams to listen

What is the current behavior?

Throw errors when no options provided

What are the steps to reproduce?

just as above said

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

streams should not rely on the options

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

windows 10, Angular 4, Material beta 5, Chrome 58.0.3029.110 (64-bit)

Is there anything else we should know?

none

Metadata

Metadata

Assignees

Labels

P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentneeds: discussionFurther discussion with the team is needed before proceeding

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions