Position of Popover content is incorrect on first click inside Table.

[venkatfrequent]

I have the popover Button inside a table. but on first click the popover content shows on center of the screen .Second click is shown on the correct spot (which is on the TD cell).

[ClemannD]

Thank you @venkatfrequent for submitting this issue!

To better help debug, could you please provide a snippet of your code implementing the popover? I attempted to reproduce by putting a popover within a table, but did not see any unwanted behaviors.

[estellechvl]

same for me. that happens when trying to affect the popover size when using popover-content

<span class="address-form__tooltip" [popover]="countryTooltip" [popoverOnHover]="false" popoverSize="large">i</span>
<popover-content #countryTooltip [closeOnClickOutside]="true">
    <p>MY CONTENT</p>
</popover-content>

if i remove the popoverSize="large" from the span then the position is correct on first click. With this directive, the position is correct only on second click.

[ClemannD]

@estellechvl Thank you for your comment! I have confirmed that there is an issue with placement when using the popoverSize directive. I will take a look and put out a fix as soon as I have a chance.

[parkersweb]

I'm seeing a similar problem using this throughout my app - in this instance I'm not using a table but display: grid is used extensively.

Is there any news of a fix? Thanks!

[justinisfluent]

I also see this when popoverSize is used. Any update on when a fix will be available?

[TheKohan]

I've came out with a hack rather than a fix, you just need to call .udatePosition() from PopoverContentComponent. That will run a recalculation after each click.

import {
  Component,
  ViewChild,
} from '@angular/core';
import { PopoverContentComponent } from 'ngx-smart-popover';
import { PopoverProps } from './model/popover';

@Component({
  selector: 'popover',
  templateUrl: './popover.component.html',
  styleUrls: ['./popover.component.scss'],
})
export class PopoverComponent {
  @ViewChild('popoverContentRef') element: PopoverContentComponent | undefined;
  }
  onOpen() {
    this.element?.updatePosition();
  }
}

And in template i've just added event listener for click

<div
  (click)="onOpen()"
  [popover]="popoverContentRef"
>
    Open popover
</div>
<popover-content #popoverContentRef>
   <div>Popover Content</div>
</popover-content>