Improve popup position

plone · Jul 19, 2024 · e2bbc8e · e2bbc8e
1 parent 49f8335
commit e2bbc8e
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,13 @@
+# 2.66.4 (2024-07-19)
+
+### Improvements
+
+- **Popup**: Prevent popups from overlapping the component containing the `PopupDirective` when there is not enough space
+
+### Bugfixes
+
+- **Select**: Hide the help text when no option is selected
+
 # 2.66.3 (2024-07-04)
 
 ### Bugfixes

diff --git a/projects/pastanaga-angular/package.json b/projects/pastanaga-angular/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@guillotinaweb/pastanaga-angular",
     "description": "Provides Pastanaga UI elements as Angular components",
-    "version": "2.66.3",
+    "version": "2.66.4",
     "license": "MIT",
     "keywords": [
         "angular",

diff --git a/projects/pastanaga-angular/src/lib/controls/textfield/select/select.component.ts b/projects/pastanaga-angular/src/lib/controls/textfield/select/select.component.ts
@@ -206,9 +206,7 @@ export class SelectComponent extends TextFieldDirective implements OnChanges, Af
     if (this.dropdownOptions.length) {
       const selectedOption = this.dropdownOptions.find((option) => (option as OptionModel).value === value);
       label = !!selectedOption ? (selectedOption as OptionModel).label : undefined;
-      if (selectedOption instanceof OptionModel) {
-        this.selectedOption = selectedOption;
-      }
+      this.selectedOption = selectedOption instanceof OptionModel ? selectedOption : undefined;
     }
     if (!label && !!this.ngContent && this.ngContent.length) {
       const selectedOption = this.ngContent.find((option) => option.value === this.control.value);

diff --git a/projects/pastanaga-angular/src/lib/popup/popup.component.ts b/projects/pastanaga-angular/src/lib/popup/popup.component.ts
@@ -40,6 +40,7 @@ export class PopupComponent implements OnInit, OnDestroy {
   popupType: 'popup' | 'dropdown' | 'menu' = 'popup';
   isDisplayed = false;
   style?: any;
+  popupHolder?: HTMLElement;
 
   private _id = '';
   private _handlers: (() => void)[] = [];
@@ -152,9 +153,10 @@ export class PopupComponent implements OnInit, OnDestroy {
     }
     if (diffY > 0) {
       const currentTop = element.style.top || '';
-      if (currentTop.endsWith('px') && parseInt(currentTop.slice(0, -2), 10) > this._originalHeight) {
+      const holderHeight = this.popupHolder?.clientHeight || 0;
+      if (currentTop.endsWith('px') && parseInt(currentTop.slice(0, -2), 10) > (this._originalHeight + holderHeight)) {
         // enough space above, we display the dropdown on top
-        element.style.top = `calc(${currentTop} - ${this._originalHeight}px - ${POPUP_OFFSET * 2}px)`;
+        element.style.top = `calc(${currentTop} - ${this._originalHeight}px - ${holderHeight}px - ${POPUP_OFFSET * 2}px)`;
         return true;
       } else if (!!currentTop) {
         // not enough space, we just align the dropdown bottom with the parent bottom

diff --git a/projects/pastanaga-angular/src/lib/popup/popup.directive.ts b/projects/pastanaga-angular/src/lib/popup/popup.directive.ts
@@ -21,7 +21,16 @@ import { takeUntil, throttleTime } from 'rxjs/operators';
   exportAs: 'paPopupRef',
 })
 export class PopupDirective implements OnInit, OnChanges, OnDestroy {
-  @Input() paPopup?: PopupComponent | null;
+  @Input()
+  set paPopup(popup: PopupComponent | undefined | null) {
+    if (popup) {
+      popup.popupHolder = this.element.nativeElement;
+    }
+    this._paPopup = popup;
+  }
+  get paPopup() {
+    return this._paPopup;
+  }
   @Input() popupPosition?: PositionStyle;
   @Input({ transform: numberAttribute }) popupVerticalOffset = POPUP_OFFSET;
   @Input({ transform: booleanAttribute }) alignPopupOnLeft = false;
@@ -31,6 +40,7 @@ export class PopupDirective implements OnInit, OnChanges, OnDestroy {
   @Input({ transform: booleanAttribute }) popupDisabled = false;
   @Input({ transform: booleanAttribute }) openOnly = false;
 
+  private _paPopup?: PopupComponent | null;
   private _handlers: (() => void)[] = [];
   private _scrollOrResize = new Subject<Event>();
   private _terminator = new Subject<void>();