[Bug report]: Popover menu throws error on creation. Cannot read properties of undefined ('update')

[joakim-malmstrom-scania]

Requirements before reporting

• [X] No duplicated issue reported.
• [X] I have checked the latest version if the bug exist there. See all available packages at npmJS.com
• [X] I have followed the installation guide.

Package versions

@scania/tegel-angular: ^1.15.0

Browser

Chrome

Framework

Angular

Version

15

Reproduction steps

1. See code below for steps on creating the popover
2. A directive is created
3. The directive is injected in a .html file
4. The popover component is created on right-clicking an element

Code example

@Directive({
  selector: '[popover-ref]',
})

export class PopoverRefDirective {
  constructor(public viewContainerRef: ViewContainerRef) { }
}

// component.html
<!-- Popover Menus -->
<ng-template popover-ref></ng-template>

// component.ts
  @ViewChild(PopoverRefDirective) popoverRef: PopoverRefDirective;

  ngAfterViewInit() {
    this.popoverMenuLoaderService.setViewContainer(this.popoverRef);
  }

// openMenu is called on right click
  openMenu<T, Y>(popoverMenuComponent: Type<PopoverMenuComponent<T, Y>>, data?: T): EventEmitter<Y> {
    const component = this.createPopoverMenuComponent(popoverMenuComponent, data);

    return component.instance.show();
  }

  createPopoverMenuComponent<T, Y>(popoverMenuComponent: Type<PopoverMenuComponent<T, Y>>, data?: T): ComponentRef<PopoverMenuComponent<T, Y>> {
    const component: ComponentRef<PopoverMenuComponent<T, Y>> = this.container.viewContainerRef.createComponent(popoverMenuComponent);

    component.instance.data = data;

    return component;
  }

// created component.ts
  show(): EventEmitter<any> {
    this.popoverRef.nativeElement.show = true;
    return this.popoverClosed;
  }

Screenshots

Expected behaviour

Upon creation, popover component should not throw: TypeError: Cannot read properties of undefined (reading 'update').

Console errors

TypeError: Cannot read properties of undefined (reading 'update')

// popover-core.tsx
// popperInstance is created but without an update function in initialize
 initialize({ referenceEl, trigger, }) {
        this.cleanUp();
        if (typeof referenceEl !== 'undefined') {
            this.target = referenceEl;
        }
        else {
            this.target = this.selector ? document.querySelector(this.selector) : null;
        }
        this.popperInstance = this.target
            ? createPopper(this.target, this.host, {
                strategy: 'fixed',
                placement: this.placement,
                modifiers: [
                    {
                        name: 'offset',
                        options: {
                            offset: [this.offsetSkidding, this.offsetDistance],
                        },
                    },
                    ...this.modifiers,
                ],
            })
            : null;
        if (!this.popperInstance) {
            console.error(`Could not initialize: reference element not found.`);
        }
        [..]

    componentDidRender() {
        if (this.isShown && !this.renderedShowValue) {
            // It fails here on .update() function
            this.popperInstance.update();
        }
        this.renderedShowValue = this.isShown;
    }

Contact information

[email protected]