Random error clicking on popover, and empty popover when opening from popover.load

[ilawton]

Hi, I've just bought the popover and got it working but here are 2 issues.

1. When using the the popup with code (popover.load) and passing in a component, it's always empty. If I use the popover directive then it works fine (so I'm doing that for now). Any immediate ideas? I've followed the installation guide and made sure all components (including my component) are registered properly (entryComponents, declarations etc).

2. This is the most annoying one. Every now and again (and I'm really struggling to replicated it) I get the following error in the console when opening a popover:

ERROR TypeError: Cannot read property 'animationTranslateY' of undefined at OverlayContainerComponent.push.../../node_modules/@ivylab/overlay-angular/fesm5/ivylab-overlay-angular.js.OverlayContainerComponent.closeOverlay (ivylab-overlay-angular.js:300) at OverlayContainerComponent.push.../../node_modules/@ivylab/overlay-angular/fesm5/ivylab-overlay-angular.js.OverlayContainerComponent.handleGlobalEvents (ivylab-overlay-angular.js:324) at SafeSubscriber._next (ivylab-overlay-angular.js:68) at SafeSubscriber.push.../../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:196) at SafeSubscriber.push.../../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:134) at Subscriber.push.../../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:77) at Subscriber.push.../../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54) at ReplaySubject.push.../../node_modules/rxjs/_esm5/internal/ReplaySubject.js.ReplaySubject._subscribe (ReplaySubject.js:67) at ReplaySubject.push.../../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe (Observable.js:43) at ReplaySubject.push.../../node_modules/rxjs/_esm5/internal/Subject.js.Subject._trySubscribe (Subject.js:89)

I'm not doing anything special or strange. The code to trigger the popover is this:

<i class="fas fa-print" popoverWidth="200px" placement="bottom-left" [popoverTriggerFor]="subStatesFilter">

The popover element is this:

<popover #subStatesFilter> Hello world! </popover>

I'm using Angular 7.1.0

Any ideas?

[ilawton]

Hi, I've figured out how to replicate the error. The popover is in a Material Table. When the table datasource is refreshed or initially loads, clicking on any popover in the table throws an error. Then the error doesn't appear again until the datasource is reloaded. Any ideas how to get this so it doesn't through an error?

Maybe this is also the problem to my first issue. The fact it doesn't work well in tables.

[drozhzhin-n-e]

@ilawton Hey. I'm sorry for the late reply. Is the problem still relevant?

[ilawton]

Hey, I got it working. I had to comment out:

this.popup.close()

from ngOnDestroy in file popover-trigger.directive.ts

Basically, I had popovers in my Material Table. When the table refreshes (datasource is updated) I think popovers are destroyed anyway. Then when I click on a new popover in a newly rendered row in the table the error in my above post was being thrown. Can't 100% remember how I tracked it down now, but I think it was something to do with overlay still thinking there were properties there when there weren't. An issue due to the re-rendering of popovers in the table. Perhaps it maybe more obvious to you?

[ilawton]

An alternative would have been to check that "properties" isn't null in the overlay class when closing, but that would mean modifying your overlay package that is in node_modules.

[drozhzhin-n-e]

Hey. I tried to recreate the context of your task, but I could not find the problem. But I added a check to the overlay at closing. You can download the source code from the same link.