From 5f62cf48429d9db25738699374156febcfdcd6c1 Mon Sep 17 00:00:00 2001
From: Lixin Yan <yanl@umich.edu>
Date: Wed, 11 Dec 2024 20:07:20 -0500
Subject: [PATCH] fix CascadeSelect panel align issue (Issue #16910)

---
 packages/primeng/src/cascadeselect/cascadeselect.ts          | 5 ++++-
 .../primeng/src/cascadeselect/style/cascadeselectstyle.ts    | 5 +++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/primeng/src/cascadeselect/cascadeselect.ts b/packages/primeng/src/cascadeselect/cascadeselect.ts
index f3a4021e38c..2dfa0af8338 100755
--- a/packages/primeng/src/cascadeselect/cascadeselect.ts
+++ b/packages/primeng/src/cascadeselect/cascadeselect.ts
@@ -319,7 +319,7 @@ export class CascadeSelectSub extends BaseComponent implements OnInit {
             (onHide)="hide($event)"
         >
             <ng-template #content>
-                <div #panel [ngClass]="{ 'p-cascadeselect-overlay p-component': true, 'p-cascadeselect-mobile-active': queryMatches() }" [class]="panelStyleClass" [ngStyle]="panelStyle" [attr.data-pc-section]="'panel'">
+                <div #panel [ngClass]="{ 'p-cascadeselect-overlay p-component': true, 'p-cascadeselect-mobile-active': queryMatches(), 'bottom-aligned': transformOrigin?.includes('bottom') }" [class]="panelStyleClass" [ngStyle]="panelStyle" [attr.data-pc-section]="'panel'">
                     <ng-template *ngTemplateOutlet="headerTemplate"></ng-template>
                     <div class="p-cascadeselect-list-container" [attr.data-pc-section]="'wrapper'">
                         <p-cascadeselect-sub
@@ -689,6 +689,8 @@ export class CascadeSelect extends BaseComponent implements OnInit {
      */
     @ContentChild('clearicon') clearicon: Nullable<TemplateRef<any>>;
 
+    transformOrigin?: string;
+
     _showTransitionOptions: string = '';
 
     _hideTransitionOptions: string = '';
@@ -1388,6 +1390,7 @@ export class CascadeSelect extends BaseComponent implements OnInit {
             const activeOptionPath = this.activeOptionPath();
             if (isNotEmpty(activeOptionPath)) {
                 this.overlayViewChild.alignOverlay();
+                this.transformOrigin = this.overlayViewChild.overlayEl?.style?.['transform-origin'];
             }
         });
     }
diff --git a/packages/primeng/src/cascadeselect/style/cascadeselectstyle.ts b/packages/primeng/src/cascadeselect/style/cascadeselectstyle.ts
index 0f60c7ae9ad..14355204d41 100644
--- a/packages/primeng/src/cascadeselect/style/cascadeselectstyle.ts
+++ b/packages/primeng/src/cascadeselect/style/cascadeselectstyle.ts
@@ -180,6 +180,11 @@ p-cascadeselect.ng-invalid.ng-dirty .p-cascadeselect-label.p-placeholder {
     top: 0;
 }
 
+.bottom-aligned .p-cascadeselect-option-active > .p-cascadeselect-option-list {
+    top: auto;
+    bottom: 0;
+}
+
 .p-cascadeselect-option-content {
     display: flex;
     align-items: center;