Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
wpcfan opened this issue May 17, 2017 · 2 comments · Fixed by #8802
Closed

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

wpcfan opened this issue May 17, 2017 · 2 comments · Fixed by #8802
Assignees
Labels
needs: discussion Further discussion with the team is needed before proceeding P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@wpcfan
Copy link

wpcfan commented May 17, 2017

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

@arlowhite
Copy link

I had the same issue. In my app, I wanted to differentiate selection via the autocomplete from input. So I had to subscribe this.mdAutoTrigger.optionSelections, but then encountered the same error because my MdOption list is also driven by an Observable.
So I had to write code that resubscribes optionSelections every time my Observable that drives the MdOption list changes.

@crisbeto crisbeto self-assigned this Dec 4, 2017
@crisbeto crisbeto added has pr P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent labels Dec 4, 2017
crisbeto added a commit to crisbeto/material2 that referenced this issue Dec 4, 2017
Currently the `MatAutocompleteTrigger` will throw if `optionSelections` is accessed before `ngAfterViewInit`. These changes add a fallback stream that will be replaced once everything is initialized.

Fixes angular#4616.
crisbeto added a commit to crisbeto/material2 that referenced this issue Dec 6, 2017
Currently the `MatAutocompleteTrigger` will throw if `optionSelections` is accessed before `ngAfterViewInit`. These changes add a fallback stream that will be replaced once everything is initialized.

Fixes angular#4616.
crisbeto added a commit to crisbeto/material2 that referenced this issue Dec 6, 2017
Currently the `MatAutocompleteTrigger` will throw if `optionSelections` is accessed before `ngAfterViewInit`. These changes add a fallback stream that will be replaced once everything is initialized.

Fixes angular#4616.
crisbeto added a commit to crisbeto/material2 that referenced this issue Dec 14, 2017
Currently the `MatAutocompleteTrigger` will throw if `optionSelections` is accessed before `ngAfterViewInit`. These changes add a fallback stream that will be replaced once everything is initialized.

Fixes angular#4616.
crisbeto added a commit to crisbeto/material2 that referenced this issue Jan 5, 2018
Currently the `MatAutocompleteTrigger` will throw if `optionSelections` is accessed before `ngAfterViewInit`. These changes add a fallback stream that will be replaced once everything is initialized.

Fixes angular#4616.
jelbourn pushed a commit that referenced this issue Jan 23, 2018
)

Currently the `MatAutocompleteTrigger` will throw if `optionSelections` is accessed before `ngAfterViewInit`. These changes add a fallback stream that will be replaced once everything is initialized.

Fixes #4616.
jelbourn pushed a commit to jelbourn/components that referenced this issue Jan 29, 2018
…gular#8802)

Currently the `MatAutocompleteTrigger` will throw if `optionSelections` is accessed before `ngAfterViewInit`. These changes add a fallback stream that will be replaced once everything is initialized.

Fixes angular#4616.
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 8, 2019
@mmalerba mmalerba added the needs: discussion Further discussion with the team is needed before proceeding label Mar 3, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
needs: discussion Further discussion with the team is needed before proceeding P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants