Merge pull request #56 from klippa-app/fix/add_size_observers_for_select_tail

Added size observers for components used in tail position calculation

Author: wouter-willems

projects/klippa/ngx-enhancy-forms/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klippa/ngx-enhancy-forms",
-  "version": "20.1.0",
+  "version": "20.1.1",
   "publishConfig": {
     "access": "public"
   },

projects/klippa/ngx-enhancy-forms/src/lib/elements/select/select.component.ts

@@ -82,11 +82,12 @@ export class SelectComponent extends ValueAccessorBase<string | string[]> implem
 
 	private lastItemIndexReached = -1;
 	public dropdownPositionToUse: 'auto' | 'bottom' | 'top' | 'left' | 'right' = 'bottom';
-	private isOpen: boolean = false;
+	private isOpen = false;
 	private dropdownPanelOffsetX = 0;
 	private dropdownPanelOffsetY = 0;
 	private anchorAbsolute: HTMLDivElement;
 	private anchorFixed: HTMLDivElement;
+	private resizeObserver?: ResizeObserver;
 
 	constructor(
 		@Optional() @Host() protected parent: FormElementComponent,
@@ -101,6 +102,7 @@ export class SelectComponent extends ValueAccessorBase<string | string[]> implem
 	ngAfterViewInit(): void {
 		this.addPrefix();
 		this.addTail();
+		this.createSizeObservers();
 		this.updateTailPosition();
 		this.elRef.nativeElement.querySelector('input').addEventListener('keydown', this.keyListener);
 	}
@@ -130,6 +132,29 @@ export class SelectComponent extends ValueAccessorBase<string | string[]> implem
 		}
 	}
 
+	private createSizeObservers(): void {
+		const ngInput = this.elRef.nativeElement.querySelector('.ng-select');
+		const arrowWrapper = this.elRef.nativeElement.querySelector('.ng-arrow-wrapper');
+		const prefixElement = this.elRef.nativeElement.querySelector('.prefix-tpl');
+
+		const elementsToObserve: HTMLElement[] = [];
+		if (ngInput) {
+			elementsToObserve.push(ngInput);
+		}
+		if (arrowWrapper) {
+			elementsToObserve.push(arrowWrapper);
+		}
+		if (prefixElement) {
+			elementsToObserve.push(prefixElement);
+		}
+
+		this.resizeObserver = new ResizeObserver(() => {
+			this.updateTailPosition();
+		});
+
+		elementsToObserve.forEach(el => this.resizeObserver.observe(el));
+	}
+
 	private updateTailPosition(): void {
 		if (this.tailRef) {
 			let offset = 0;
@@ -263,7 +288,7 @@ export class SelectComponent extends ValueAccessorBase<string | string[]> implem
 
 		dropdownPanel.style.position = 'fixed';
 		this.setPanelOffsets();
-	};
+	}
 
 	private setWidthBasedOnOptionsWidths = async (): Promise<void> => {
 		if (this.truncateOptions === false) {
@@ -300,7 +325,7 @@ export class SelectComponent extends ValueAccessorBase<string | string[]> implem
 				this.setPanelOffsets();
 			}
 		}
-	};
+	}
 
 	private getAllLimitingContainers(): Array<HTMLElement> {
 		const result = [];
@@ -429,5 +454,6 @@ export class SelectComponent extends ValueAccessorBase<string | string[]> implem
 	ngOnDestroy(): void {
 		super.ngOnDestroy();
 		this.elRef.nativeElement?.querySelector('input')?.removeEventListener('keydown', this.keyListener);
+		this.resizeObserver?.disconnect();
 	}
 }