diff --git a/projects/ng-select2-component/src/lib/select2.component.scss b/projects/ng-select2-component/src/lib/select2.component.scss index e5fc74f..ed03ecd 100644 --- a/projects/ng-select2-component/src/lib/select2.component.scss +++ b/projects/ng-select2-component/src/lib/select2.component.scss @@ -763,7 +763,7 @@ .cdk-overlay-container { .select2-container .select2-dropdown.select2-dropdown--above { - bottom: 28px; + bottom: 0; } .select2-container--open.select2-position-auto .select2-dropdown { diff --git a/projects/ng-select2-component/src/lib/select2.component.ts b/projects/ng-select2-component/src/lib/select2.component.ts index 8faa371..54e25b2 100644 --- a/projects/ng-select2-component/src/lib/select2.component.ts +++ b/projects/ng-select2-component/src/lib/select2.component.ts @@ -2,6 +2,7 @@ import { CdkConnectedOverlay, CdkOverlayOrigin, ConnectedOverlayPositionChange, + ConnectionPositionPair, VerticalConnectionPos, } from '@angular/cdk/overlay'; import { ViewportRuler } from '@angular/cdk/scrolling'; @@ -198,8 +199,8 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView // ----------------------- signal-input - readonly cdkConnectedOverlay = viewChild(CdkConnectedOverlay); - readonly selection = viewChild>('selection'); + readonly cdkConnectedOverlay = viewChild.required(CdkConnectedOverlay); + readonly selection = viewChild.required>('selection'); readonly resultContainer = viewChild>('results'); readonly results = viewChildren('result'); readonly searchInput = viewChild>('searchInput'); @@ -269,7 +270,34 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView protected _dropdownRect: DOMRect | undefined; protected get _positions(): any { - return this.listPosition() === 'auto' ? undefined : null; + switch (this.listPosition()) { + case 'above': + return [ + new ConnectionPositionPair( + { originX: 'start', originY: 'top' }, + { overlayX: 'start', overlayY: 'bottom' }, + ), + ]; + case 'auto': + return [ + new ConnectionPositionPair( + { originX: 'start', originY: 'bottom' }, + { overlayX: 'start', overlayY: 'top' }, + ), + new ConnectionPositionPair( + { originX: 'start', originY: 'top' }, + { overlayX: 'start', overlayY: 'bottom' }, + ), + ]; + + default: + return [ + new ConnectionPositionPair( + { originX: 'start', originY: 'bottom' }, + { overlayX: 'start', overlayY: 'top' }, + ), + ]; + } } protected maxResultsExceeded: boolean | undefined; @@ -406,7 +434,7 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView } ngAfterViewInit() { - this.cdkConnectedOverlay()?.positionChange.subscribe((posChange: ConnectedOverlayPositionChange) => { + this.cdkConnectedOverlay().positionChange.subscribe((posChange: ConnectedOverlayPositionChange) => { if ( this.listPosition() === 'auto' && posChange.connectionPair?.originY && @@ -418,7 +446,7 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView } }); - this.selectionElement = this.selection()?.nativeElement; + this.selectionElement = this.selection().nativeElement; this.triggerRect(); } @@ -535,9 +563,11 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView } else if (this.resultsElement) { this.resultsElement.scrollTop = 0; } + this._changeDetectorRef.detectChanges(); + setTimeout(() => { this.triggerRect(); - this.cdkConnectedOverlay()?.overlayRef?.updatePosition(); + this.cdkConnectedOverlay().overlayRef?.updatePosition(); }, 100); }); }