fix: fix menu position when scrollbar is not visible (#1404) (#1739)

ng-select · Oct 6, 2020 · 348c117 · 348c117
1 parent 7524b5a
commit 348c117
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 8 deletions.
diff --git a/src/demo/app/examples/append-to-example/append-to-example.component.html b/src/demo/app/examples/append-to-example/append-to-example.component.html
@@ -24,3 +24,27 @@
                [(ngModel)]="selected2">
     </ng-select>
 </div>
+
+<br>
+<div class="scrollable-box">
+    <div class="overflow-box">
+        <div class="wrapper">
+            <ng-select [items]="people | async"
+                    bindLabel="company"
+                    placeholder="Select item"
+                    appendTo=".scrollable-box"
+                    multiple="true"
+                    [closeOnSelect]="false"
+                    [(ngModel)]="selected3">
+            </ng-select>
+            <ng-select [items]="people | async"
+                    bindLabel="company"
+                    placeholder="Select item"
+                    appendTo=".scrollable-box"
+                    multiple="true"
+                    [closeOnSelect]="false"
+                    [(ngModel)]="selected4">
+            </ng-select>
+        </div>
+    </div>
+</div>
diff --git a/src/demo/app/examples/append-to-example/append-to-example.component.scss b/src/demo/app/examples/append-to-example/append-to-example.component.scss
@@ -7,3 +7,19 @@
     border: 1px solid #999;
     overflow: hidden;
 }
+
+.scrollable-box {
+    position: relative;
+    height: 400px;
+    overflow: auto;
+}
+
+.wrapper {
+    display:flex;
+    justify-content: space-between;
+    column-gap: 5px;
+}
+
+.wrapper > ng-select {
+    flex: 1 0 auto;
+}
diff --git a/src/demo/app/examples/append-to-example/append-to-example.component.ts b/src/demo/app/examples/append-to-example/append-to-example.component.ts
@@ -12,6 +12,8 @@ export class AppendToExampleComponent implements OnInit {
     people: any = [];
     selected: any;
     selected2: any;
+    selected3: any;
+    selected4: any;
 
     constructor(private dataService: DataService) {
     }

diff --git a/src/ng-select/lib/ng-dropdown-panel.component.ts b/src/ng-select/lib/ng-dropdown-panel.component.ts
@@ -186,9 +186,7 @@ export class NgDropdownPanelComponent implements OnInit, OnChanges, OnDestroy {
     }
 
     adjustPosition() {
-        const parent = this._parent.getBoundingClientRect();
-        const select = this._select.getBoundingClientRect();
-        this._setOffset(parent, select);
+        this._updateYPosition();
     }
 
     private _handleDropdownPosition() {
@@ -206,7 +204,7 @@ export class NgDropdownPanelComponent implements OnInit, OnChanges, OnDestroy {
         }
 
         if (this.appendTo) {
-            this._updatePosition();
+            this._updateYPosition();
         }
 
         this._dropdown.style.opacity = '1';
@@ -403,22 +401,23 @@ export class NgDropdownPanelComponent implements OnInit, OnChanges, OnDestroy {
         if (!this._parent) {
             throw new Error(`appendTo selector ${this.appendTo} did not found any parent element`);
         }
+        this._updateXPosition();
         this._parent.appendChild(this._dropdown);
     }
 
-    private _updatePosition() {
+    private _updateXPosition() {
         const select = this._select.getBoundingClientRect();
         const parent = this._parent.getBoundingClientRect();
         const offsetLeft = select.left - parent.left;
 
-        this._setOffset(parent, select);
-
         this._dropdown.style.left = offsetLeft + 'px';
         this._dropdown.style.width = select.width + 'px';
         this._dropdown.style.minWidth = select.width + 'px';
     }
 
-    private _setOffset(parent: ClientRect, select: ClientRect) {
+    private _updateYPosition() {
+        const select = this._select.getBoundingClientRect();
+        const parent = this._parent.getBoundingClientRect();
         const delta = select.height;
 
         if (this._currentPosition === 'top') {

diff --git a/src/ng-select/lib/ng-select.component.spec.ts b/src/ng-select/lib/ng-select.component.spec.ts
@@ -3477,6 +3477,31 @@ describe('NgSelectComponent', () => {
             });
         }));
 
+        it('should set correct dropdown panel horizontal position and width when appended to custom selector', async(() => {
+            const fixture = createTestingModule(
+                NgSelectTestCmp,
+                `
+                <div class="container" style="position: relative; overflow: auto; width: 200px; height: 200px">
+                    <div style="height: 100%">
+                        <ng-select [items]="cities"
+                            appendTo=".container"
+                            bindLabel="name"
+                            style="width: 50%; margin-left: auto"
+                            [(ngModel)]="selectedCity">
+                        </ng-select>
+                    </div>
+                </div>`);
+
+            fixture.componentInstance.select.open();
+            fixture.detectChanges();
+
+            fixture.whenStable().then(() => {
+                const dropdown = <HTMLElement>document.querySelector('.container .ng-dropdown-panel');
+                expect(dropdown.style.left).toBe('100px');
+                expect(dropdown.style.width).toBe('100px');
+            });
+        }));
+
         it('should apply global appendTo from NgSelectConfig', async(() => {
             const config = new NgSelectConfig();
             config.appendTo = 'body';