Virtual scroll rework (#1188)

* fix: don't fire scroll to end when scrollTop = 0 fixes #1018 * feat: adjust dropdown position on selection when multiple and appendTo closes #984 closes #899 closes #890 closes #1018 closes #1023 closes #1144 closes #1095 closes #1122 closes #1163 closes #955
ng-select · Jun 25, 2019 · c2b094e · c2b094e
1 parent c552663
commit c2b094e
Show file tree

Hide file tree

Showing 15 changed files with 499 additions and 408 deletions.
diff --git a/demo/app/examples/groups.component.ts b/demo/app/examples/groups.component.ts
@@ -14,7 +14,6 @@ import { Component, ChangeDetectionStrategy } from '@angular/core';
             bindLabel="name"
             bindValue="name"
             groupBy="country"
-            [multiple]="true"
             [(ngModel)]="selectedAccount">
             <ng-template ng-optgroup-tmp let-item="item">
                 {{item.country || 'Unnamed group'}}
@@ -149,7 +148,7 @@ import { Component, ChangeDetectionStrategy } from '@angular/core';
     `
 })
 export class SelectGroupsComponent {
-    selectedAccount = ['Samantha'];
+    selectedAccount = 'Michael';
     accounts = [
         { name: 'Jill', email: '[email protected]', age: 15, country: undefined, child: { state: 'Active' } },
         { name: 'Henry', email: '[email protected]', age: 10, country: undefined, child: { state: 'Active' } },

diff --git a/demo/app/examples/virtual-scroll.component.ts b/demo/app/examples/virtual-scroll.component.ts
@@ -16,6 +16,7 @@ import { HttpClient } from '@angular/common/http';
                    bindLabel="title"
                    bindValue="thumbnailUrl"
                    placeholder="Select photo"
+                   appendTo="body"
                    (scroll)="onScroll($event)"
                    (scrollToEnd)="onScrollToEnd()">
             <ng-template ng-header-tmp>

diff --git a/src/ng-select/items-list.spec.ts b/src/ng-select/items-list.spec.ts
@@ -1,7 +1,7 @@
-import { NgSelectComponent } from './ng-select.component';
+import { NgSelectConfig } from './config.service';
 import { ItemsList } from './items-list';
+import { NgSelectComponent } from './ng-select.component';
 import { DefaultSelectionModel } from './selection-model';
-import { NgSelectConfig } from './config.service';
 
 describe('ItemsList', () => {
     describe('select', () => {
@@ -427,6 +427,35 @@ describe('ItemsList', () => {
         });
     });
 
+    describe('markSelectedOrDefault', () => {
+        let list: ItemsList;
+        let cmp: NgSelectComponent;
+
+        beforeEach(() => {
+            cmp = ngSelectFactory();
+            list = itemsListFactory(cmp);
+            const items = Array.from(Array(30)).map((_, index) => (`item-${index}`));
+            list.setItems(items);
+        });
+
+        it('should mark first item', () => {
+            list.markSelectedOrDefault(true);
+            expect(list.markedIndex).toBe(0);
+        });
+
+        it('should keep marked item if it is above last selected item', () => {
+            list.select(list.items[10]);
+            list.markSelectedOrDefault();
+            expect(list.markedIndex).toBe(10);
+
+            list.markNextItem();
+            list.markNextItem();
+            list.markNextItem();
+            list.markSelectedOrDefault();
+            expect(list.markedIndex).toBe(13);
+        });
+    });
+
     function itemsListFactory(cmp: NgSelectComponent): ItemsList {
         return new ItemsList(cmp, new DefaultSelectionModel());
     }

diff --git a/src/ng-select/items-list.ts b/src/ng-select/items-list.ts
@@ -201,9 +201,10 @@ export class ItemsList {
         if (this._filteredItems.length === 0) {
             return;
         }
-        const indexOfLastSelected = this._ngSelect.hideSelected ? -1 : this._filteredItems.indexOf(this.lastSelectedItem);
-        if (this.lastSelectedItem && indexOfLastSelected > -1) {
-            this._markedIndex = indexOfLastSelected;
+
+        const lastMarkedIndex = this._getLastMarkedIndex();
+        if (lastMarkedIndex > -1) {
+            this._markedIndex = lastMarkedIndex;
         } else {
             if (this._ngSelect.excludeGroupsFromDefaultSelection) {
                 this._markedIndex = markDefault ? this.filteredItems.findIndex(x => !x.disabled && !x.children) : -1;
@@ -310,6 +311,19 @@ export class ItemsList {
         }
     }
 
+    private _getLastMarkedIndex() {
+        if (this._ngSelect.hideSelected) {
+            return -1;
+        }
+
+        const selectedIndex = this._filteredItems.indexOf(this.lastSelectedItem);
+        if (this.lastSelectedItem && selectedIndex < 0) {
+            return -1;
+        }
+
+        return Math.max(this.markedIndex, selectedIndex);
+    }
+
     private _groupBy(items: NgOption[], prop: string | Function): OptionGroups {
         const groups = new Map<string | NgOption, NgOption[]>();
         if (items.length === 0) {