fab-panel and renderFooterContent

[MarcOne68]

Hi, I've an issue using renderFooterContent in a fab-panel. This is the template to reproduce the problem.

<fab-panel [isOpen]='true' headerText='Test' [renderFooterContent]='TEMPLATE'>
  <render>
    Content
    <button (click)='IncCounter()'>Change</button>
  </render>
</fab-panel>

<ng-template #TEMPLATE>
  {{Counter}}
</ng-template>

I had this exception

ERROR TypeError: Cannot convert undefined or null to object
at Function.assign ()
at ReactTemplate.push../src/@angular-react/core/src/lib/renderer/react-template.ts.ReactTemplate.componentDidUpdate (react-template.ts:66)
at commitLifeCycles (react-dom.development.js:16242)
at commitAllLifeCycles (react-dom.development.js:17592)
at HTMLUnknownElement.callCallback (react-dom.development.js:149)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:17280)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:498)

I tried to patch the code of react-template in this way (obviously it's only a temporary workaround).

  componentDidUpdate() {
    // Context has changes, trigger change detection after pushing the new context in
    try {
      Object.assign(this._embeddedViewRef.context, this.props.context);
    } catch {
      console.info('ReactTemplate invalid context');
    }
    this._embeddedViewRef.detectChanges();
  }

Naturally it seems to work, but when I click on the button the counter in the footer changes only if there is an event on the page (mouse move o click another time on the button).

It sounds like the componentDidUpdate method is called outsize the Angular Zone.
Another strange thing is that if I set the renderHeader with TEMPLATE, after rollback the workaround (try ... catch), it doesn't throw the previous exception but I've the same problem about the counter updating.

Thanks

[bengry]

I took a look at this, and regarding the first error - with the undefined context, the fix (and cause) is pretty simple - we currently assume that a context will always be present, which is not the case with this component (even when operating directly in React with office-ui-fabric-react). I'll send a PR to add a null check instead of calling Object.assign regardless.

The second issue seems to have been due to the way we handle TemplateRefs' change detection - unfortunately we didn't find a way to get notified when one of the values bound within a template has changed, which we would then use to trigger a .detectChanges() on the template. Our workaround (as noted in the code) is to listen to the NgZone's onStable:

// Throttling the detect changes to an empirically selected value so we don't overload too much work.
// TODO: This needs some better solution to listen to changes to the binding sources of the template.
this._ngZoneSubscription = ngZone.onStable
  .pipe(throttleTime(TEMPLATE_DETECT_CHANGES_THROTTLE_MS))
  .subscribe(() => {
    this._embeddedViewRef.detectChanges();
  });

componentDidUpdate is indeed called outside the Angular Zone, since React is the one calling it. Additionally, this method is unrelated to the counter problem - it's not called when the counter change (since the props of ReactTemplate haven't changed).

If you have a better idea on how to tackle this issue - please do send a PR, or at least let us know so we can try it.

In the meantime, and in continuation to the above workaround, it seems like we're just not getting notified of the last update due to the throttleTime. I changed the above code to always emit the first and last emittions, so we'll always get the last value:

this._ngZoneSubscription = ngZone.onStable
  .pipe(throttleTime(TEMPLATE_DETECT_CHANGES_THROTTLE_MS, undefined, { leading: true, trailing: true }))
  .subscribe(() => {
    this._embeddedViewRef.detectChanges();
  });

Which seems to mitigate the issue and always have the counter updated (though it does take a few ms after the original one is updated).

By the way, another way to handle this issue is to put a component inside the template, and have it handle its own CD. This works around the template's CD completely:

<fab-panel [isOpen]='true' headerText='Test' [renderFooterContent]='TEMPLATE'>
  <render>
    Content
    <button (click)='IncCounter()'>Change</button>
  </render>
</fab-panel>

<ng-template #TEMPLATE>
  <my-counter [count]="Counter"></my-counter>
</ng-template>

[MarcOne68]

Thank you Ben, everything is clear.

[bengry]

Closing this issue for now.
@MarcOne68 feel free to re-open if there's anything left to discuss here.