[Bug] MdlSelectComponent. Error after view destroy

[ggalletty]

There seems to be an error that verifies when view containing the component is instantiated, then destroyed and then reinstantiated again, for example with directive ngIf.

Console log

Error: ViewDestroyedError: Attempt to use a destroyed view: detectChanges at viewDestroyedError (vendor.bundle.js:9017) at Object.debugUpdateDirectives [as updateDirectives] (vendor.bundle.js:13162) at checkAndUpdateView (vendor.bundle.js:12503) at callWithDebugContext (vendor.bundle.js:13565) at Object.debugCheckAndUpdateView [as checkAndUpdateView] (vendor.bundle.js:13105) at ViewRef_.detectChanges (vendor.bundle.js:10577) at MdlSelectComponent.webpackJsonp.737.MdlSelectComponent.renderValue (0.chunk.js:5154) at MdlSelectComponent.webpackJsonp.737.MdlSelectComponent.writeValue (0.chunk.js:5228)

Steps to reproduce

1. Apply structural directive to MdlElement or its container
2. Match conditions to destroy/init view
3. Match conditions to init/destroy view

The issue verified both on reactive and template-driven forms

[abdulqadir93]

I encountered the same issue today. In case if you're looking for a workaround (in the meanwhile this is fixed) to suppress the exception, in the component where mdl-select is used, take the reference of the select field, then inside the function which is supposed to redirect away from the view (potentially call ngOnDestroy), call mdlSelect.popoverComponent.ngOnDestroy(). So, something like this:

@ViewChildren(MdlSelectComponent) mdlSelect: QueryList<MdlSelectComponent>;
redirectAwayFromThisComponent() {
  // we have to do this before ngOnDestroy is called!
  this.mdlSelect.forEach(mdlSelect => mdlSelect.popoverComponent.ngOnDestroy());
  // now the statement which might cause the component's ngOnDestroy to be called
  this.router.navigate([....]);
}

[ggalletty]

@abdulqadir93 It's a good solution but mine was a bit different use case.

I was working on a dynamic form which instantiated/destroyed input components with ngIf template directive, so for the time being I'm simply hiding them which hidden template directive, which achieves a similar result and does not have to reinstantiate the components every time.

[abdulqadir93]

@gallettigr In your case, what you did seems like a better approach.
But for anyone who wants to use ngIf instead of [hidden] attribute (for better performance maybe), then you'd have to call popover's ngOnDestroy within the mdl-select component manually before you return a falsy value to the ngIf directive.