primefaces / primeng

The Most Complete Angular UI Component Library
https://primeng.org
Other
10.35k stars 4.58k forks source link

ContextMenu position error with sidebar when sidebar pop at page bottom #16530

Open moJiXiang opened 1 week ago

moJiXiang commented 1 week ago

Describe the bug

ContextMenu poisition will not append to list item, when sidebar popup from page bottom, look at demo below.

https://stackblitz.com/edit/274pnq?file=src%2Fapp%2Fsidebar-basic-demo.html,src%2Fapp%2Fsidebar-basic-demo.ts

Environment

https://stackblitz.com/edit/274pnq?file=src%2Fapp%2Fsidebar-basic-demo.html,src%2Fapp%2Fsidebar-basic-demo.ts

Reproducer

No response

Angular version

^18.0.1

PrimeNG version

17.18.11

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

22.0.0

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

wS2Zth commented 1 week ago
<div class="card flex justify-content-center">
  <p-sidebar
    ...
  </p-sidebar>

  <p-contextMenu #cm [model]="items">
    ...
  </p-contextMenu>

  <p-button (onClick)="sidebarVisible = true" icon="pi pi-arrow-right" />
</div>

image

moJiXiang commented 6 days ago
<div class="card flex justify-content-center">
  <p-sidebar
    ...
  </p-sidebar>

  <p-contextMenu #cm [model]="items">
    ...
  </p-contextMenu>

  <p-button (onClick)="sidebarVisible = true" icon="pi pi-arrow-right" />
</div>

image

OK, It's a way resolve my problem. But if I want use a component with contextMenu in sidebar, the bug still exist. Like this code:

// main.component.html
<p-sidebar>
   <sub-component></sub-component>
</p-sidebar>

// sub-component.component.html
<ul *ngFor="let i of items; let i = $index">
  <li (contextmenu)="showContextMenu()">{{i}}</li>
</ul>
<p-contextMenu [items]="menus"></p-contextMenu>