fix: scroll to marked item only when it is outside of panel height

closes #1273

src/demo/app/examples/group-default-example/group-default-example.component.ts

@@ -7,11 +7,8 @@ import { Component, OnInit } from '@angular/core';
 })
 export class GroupDefaultExampleComponent implements OnInit {
 
-    selectedAccount = 'Michael';
+    selectedAccount = 'Adam';
     accounts = [
-        { name: 'Jill', email: 'jill@email.com', age: 15, country: undefined, child: { state: 'Active' } },
-        { name: 'Henry', email: 'henry@email.com', age: 10, country: undefined, child: { state: 'Active' } },
-        { name: 'Meg', email: 'meg@email.com', age: 7, country: null, child: { state: 'Active' } },
         { name: 'Adam', email: 'adam@email.com', age: 12, country: 'United States', child: { state: 'Active' } },
         { name: 'Homer', email: 'homer@email.com', age: 47, country: '', child: { state: 'Active' } },
         { name: 'Samantha', email: 'samantha@email.com', age: 30, country: 'United States', child: { state: 'Active' } },

src/ng-select/lib/ng-dropdown-panel.component.ts

@@ -300,7 +300,9 @@ export class NgDropdownPanelComponent implements OnInit, OnChanges, OnDestroy {
 
     private get _startOffset() {
         if (this.markedItem) {
-            return this.markedItem.index * this._panelService.dimensions.itemHeight;
+            const { itemHeight, panelHeight } = this._panelService.dimensions;
+            const offset = this.markedItem.index * itemHeight;
+            return panelHeight > offset ? 0 : offset;
         }
         return 0;
     }

src/ng-select/lib/ng-dropdown-panel.service.spec.ts

@@ -51,10 +51,14 @@ describe('NgDropdownPanelService', () => {
         });
 
         it('should not scroll if item is in visible area', () => {
-            expect(service.getScrollTo(0, 40, 0)).toBe(0);
+            expect(service.getScrollTo(0, 40, 0)).toBeNull();
             expect(service.getScrollTo(200, 40, 0)).toBeNull();
         });
 
+        it('should not scroll if item is inside panel height', () => {
+            expect(service.getScrollTo(40, 40, 40)).toBeNull();
+        });
+
         it('should scroll by item height', () => {
             expect(service.getScrollTo(240, 40, 0)).toBe(40);
         });

src/ng-select/lib/ng-dropdown-panel.service.ts

@@ -62,9 +62,14 @@ export class NgDropdownPanelService {
     }
 
     getScrollTo(itemTop: number, itemHeight: number, lastScroll: number) {
+        const { panelHeight } = this.dimensions;
         const itemBottom = itemTop + itemHeight;
         const top = lastScroll;
-        const bottom = top + this.dimensions.panelHeight;
+        const bottom = top + panelHeight;
+
+        if (panelHeight >= itemBottom && lastScroll === itemTop) {
+            return null;
+        }
 
         if (itemBottom > bottom) {
             return top + itemBottom - bottom;

src/ng-select/lib/ng-select.component.spec.ts

@@ -1045,14 +1045,12 @@ describe('NgSelectComponent', () => {
             tickAndDetectChanges(fixture);
             fixture.detectChanges();
 
-            const buffer = 4;
-            const itemHeight = 18;
             const options = fixture.debugElement.nativeElement.querySelectorAll('.ng-option');
             const marked = fixture.debugElement.nativeElement.querySelector('.ng-option-marked');
 
-            expect(options.length).toBe(22);
+            expect(options.length).toBe(18);
             expect(marked.innerText).toBe('k');
-            expect(marked.offsetTop).toBe(buffer * itemHeight);
+            expect(marked.offsetTop).toBe(180);
         }));
 
         it('should scroll to item and do not change scroll position when scrolled to visible item', fakeAsync(() => {