Adding a ngbtooltip to a ngbmodal

[LiamAjones]

Bug description:

Adding a ngbtooltip to the first focus-able element will result in an error when the modal is opened.

Error thrown is

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'className: undefined'. Current value: 'className: tooltip show'. It seems like the view has been created after its parent and its children have been dirty checked. Has it been created in a change detection hook ?

Link to minimally-working StackBlitz that reproduces the issue:

Link to stack blitz

Versions of Angular, ng-bootstrap and Bootstrap:

Angular:
7.0.0
ng-bootstrap:
4.1.1

[maxokorokov]

Looks like broken since recently:

• autofocus in modal window happens in the afterViewInit lifecycle hook and is done synchronously.
• we started opening tooltip on focus by default in 4.1.0, so focusing triggers tooltip opening
• on tooltip open there is only markForCheck() and by this time has CD already run on the tooltip.

---

Proposal is to do two things:

• I guess we should force-run change detection in tooltip on open, because we never know from where it will be opened
• We should focus modal by setting timeout when the zone is stable (least priority possible I suppose)

this._zone.onStable.asObsevable().pipe(take(1)).subscribe(() => setTimeout(() => {
  // call element.focus(); here
}, 0))

[benouat]

I guess we should force-run change detection in tooltip on open, because we never know from where it will be opened

That one should be fixed when #3138 land