menu: appendTo values other than body not working correctly in v18

[jasonverber]

Describe the bug

When Menu.appendTo is set to a value other than "body" the menu items are not appended to the element passed via template ref, but rather the element is appended to the menu items.

appendOverlay() {
        if (this.appendTo) {
            if (this.appendTo === 'body') this.renderer.appendChild(this.document.body, this.container);
            else appendChild(this.container, this.appendTo);
        }
    }

Changing the order of the parameters fixes this:

appendOverlay() {
        if (this.appendTo) {
            if (this.appendTo === 'body') this.renderer.appendChild(this.document.body, this.container);
            else appendChild(this.appendTo, this.container);
        }
    }

This actually appears to be backwards everywhere that the @primeuix/utils version of appendChild is called.

Environment

Fresh download of the v18 branch running the showcase app with a menu added to a button will reproduce this. Personally running on an Apple silicon Mac with node 18.19.1.

Reproducer

https://stackblitz.com/edit/github-l2mr75?file=src%2Fapp%2Fapp.component.html

Angular version

18

PrimeNG version

18.0.0-rc.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.19.1

Browser(s)

No response

Steps to reproduce the behavior

1. Install PrimeNG 18
2. Use the Menu component with [appendTo]="someTemplateRef"
3. Observe the menu does not appear where it should.
4. Update menu.ts to reverse the order of the parameters for appendChild
5. Observe the menu does appear where it should.

Expected behavior

Menu items should appear appended to the element passed in via appendTo

[mertsincan]

Good catch! Thanks a lot for your report!

[epitzalis]

In Angular 18.1.1 and primeng 17.18.5 the same problem occurs

[VicTMPDeV]

same environment than @epitzalis commented, same problem

[VicTMPDeV]

Using primeng v.19.0.5, with angular version 19.0.5. Using p-menu component with an [appendTo] value different from 'body' makes p-menu never closing (i guess it's something about bubbling event behavior).
I need to use another value different from body because p-menu scrolls along with all scrollable content. There I have to snapshots, initial and final positioning:

INITIAL:

SCROLLING:

[pippaz]

This is still an issue for me, is there a workaround that you know of?

I am using a table and a split button.

The menu comes up at the bottom of the page.
<ng-template pTemplate="body" let-item> <tr> <td class="nmb-action"> <p-splitbutton appendTo="body" label="Edit" [raised]="true" icon="fa fa-pen" [model]="menuItems" (onClick)="edit(item)" (onDropdownClick)="menuItems = getMenuIems(item)" outlined="true" ></p-splitbutton> </td>

"primeng": "^18.0.2",

[VicTMPDeV]

I have fix it using a CSS class like this

<p-menu class="foo__sort-menu" [model]="sortOptions" [popup]="true" #sortMenu>
<ng-template #item let-item>
<li class="p-menu-item-link"
[class.p-menu-item-link--selected]="selectedSortOption === item.label"
(click)="item.command()">
{{ item.label }}

&__sort-menu {
position: absolute;
top: 0;
left: 0;
z-index: 1011;
position: fixed;
}

now it works the way I want because first I possitioning the class name sort-menu of the p-menu relative to the button i want to place it (it has to have a position: relative) , and once positioned, change it to fixed. I didn't know this feature about css, but it uses the previous absolute position for then fix the position around it.

[pippaz]

Thank you so much! For the table I ended up making the 'td' relative

<ng-template pTemplate="body" let-item>
<tr>
<td class="action relative">
<p-splitbutton label="Edit" [raised]="true" icon="fa fa-pen" [model]="menuItems" (onClick)="edit(item)" (onDropdownClick)="menuItems = getMenuIems(item)" outlined="true" ></p-splitbutton>
`

And added this global style.

.p-splitbutton {
p-tieredmenu {
position: fixed !important;
z-index: 1050 !important;
}
}

As the [appendTo]="body" was behaving strangely.