diff --git a/src/demo/app/examples/group-default-example/group-default-example.component.ts b/src/demo/app/examples/group-default-example/group-default-example.component.ts index 7d5c49be9..400cf50d9 100644 --- a/src/demo/app/examples/group-default-example/group-default-example.component.ts +++ b/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' } }, diff --git a/src/ng-select/lib/ng-dropdown-panel.component.ts b/src/ng-select/lib/ng-dropdown-panel.component.ts index 5e7c1a8f6..6c78bff4b 100644 --- a/src/ng-select/lib/ng-dropdown-panel.component.ts +++ b/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; } diff --git a/src/ng-select/lib/ng-dropdown-panel.service.spec.ts b/src/ng-select/lib/ng-dropdown-panel.service.spec.ts index 6792aa64f..6ca28aab6 100644 --- a/src/ng-select/lib/ng-dropdown-panel.service.spec.ts +++ b/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); }); diff --git a/src/ng-select/lib/ng-dropdown-panel.service.ts b/src/ng-select/lib/ng-dropdown-panel.service.ts index d3b518eb0..3c23c415b 100644 --- a/src/ng-select/lib/ng-dropdown-panel.service.ts +++ b/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; diff --git a/src/ng-select/lib/ng-select.component.spec.ts b/src/ng-select/lib/ng-select.component.spec.ts index 5219ba85d..9dee14151 100644 --- a/src/ng-select/lib/ng-select.component.spec.ts +++ b/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(() => {