ConfirmPopup arror right side rendering defect

[DarienF]

Describe the bug

Try to render ConfirmPopup on something located on right side of the panel or screen. Arror should be set on right side of the popup.
...and here what does it look like on my project:

...and here on reproducer:

Environment

"primeflex": "^3.3.1",
"primeicons": "^6.0.1",
"primeng": "^17.0.0-rc.1",

Reproducer

https://stackblitz.com/edit/github-ntfeae?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.module.ts

Angular version

17.0.0

PrimeNG version

17.0.0-rc.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

v20.10.0

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[mertsincan]

Thanks a lot for your report! I set a milestone. We'll fix it before the milestone is released.

[cetincakiroglu]

Hi,

The source of the problem is the element obtained with event.target. event.target gets the element on which the mouse is currently positioned. In this example, sometimes event.target is the button element, while other times it can be the span or icon elements inside the button component. When you take event.target as the button, the component works correctly, but when the span or icon elements are taken as the target, the mentioned problem occurs. To be able to correctly obtain the button component as the target, I will make the elementRef of the button public and after the release, you can update your example with the correct target element to make it work seamlessly.

New use case will below:

// component.html

<p-button #btn (onClick)="onClick($event)"><p-button>
<p-confirmPopup></p-confirmPopup>

// component.ts
  @ViewChild("btn") button: any; // instead of ViewChild, you can also send the btn element as function parameter

  onClick(event: Event) {
    this.confirmationService.confirm({
      target: this.button.el.nativeElement.firstChild, // this one will result as <button> element every time
      message: "Are you shure?",
      icon: "pi pi-exclamation-triangle",
      acceptLabel: "Yes",
      acceptIcon: "pi pi-check",
      rejectLabel: "No",
      rejectIcon: "pi pi-times",
      accept: () => {},
      reject: () => {},
    });
  }

Try this after 17.4.0 release.

[DarienF]

I figure that out already. In some cases usage of 'event.currentTarget' solve the problem. Any way, get valid target HTML DOM element from 'event' is solution.
I thought about the future upgrade...nice to set popup position left/right from target HTML DOM element.

[DarienF]

Solution with usage ViewChild interesting. Allow to trigger popup from button but set popup on another target HTML DOM element. Thanks)