diff --git a/components/select/nz-option-container.component.ts b/components/select/nz-option-container.component.ts index f27850fefb6..8760acfebf2 100644 --- a/components/select/nz-option-container.component.ts +++ b/components/select/nz-option-container.component.ts @@ -8,6 +8,7 @@ import { QueryList, ViewChildren } from '@angular/core'; +import { isNotNil } from '../core/util/check'; import { NzOptionGroupComponent } from './nz-option-group.component'; import { NzOptionComponent } from './nz-option.component'; @@ -200,9 +201,11 @@ export class NzOptionContainerComponent implements AfterContentInit, OnDestroy { scrollIntoView(): void { if (this.listOfNzOptionLiComponent && this.listOfNzOptionLiComponent.length) { - const targetLi = this.listOfNzOptionLiComponent.find(o => o.nzOption === this.activatedOption); - if (targetLi && targetLi.el) { - setTimeout(() => targetLi.el.scrollIntoView(false), 150); + const targetOption = this.listOfNzOptionLiComponent.find(o => o.nzOption === this.activatedOption); + /* tslint:disable-next-line:no-string-literal */ + if (targetOption && targetOption.el && targetOption.el[ 'scrollIntoViewIfNeeded' ]) { + /* tslint:disable-next-line:no-string-literal */ + setTimeout(() => targetOption.el[ 'scrollIntoViewIfNeeded' ](false), 150); } } } @@ -215,7 +218,7 @@ export class NzOptionContainerComponent implements AfterContentInit, OnDestroy { let listOfSelectedValue = [ ...this.nzListOfSelectedValue ]; if (this.isMultipleOrTags) { const targetValue = listOfSelectedValue.find(o => this.compareWith(o, option.nzValue)); - if (targetValue) { + if (isNotNil(targetValue)) { if (!isPressEnter) { /** should not toggle option when press enter **/ listOfSelectedValue.splice(listOfSelectedValue.indexOf(targetValue), 1); diff --git a/components/select/nz-option-li.component.ts b/components/select/nz-option-li.component.ts index a5dcbd24ecd..5b10e5d0dd4 100644 --- a/components/select/nz-option-li.component.ts +++ b/components/select/nz-option-li.component.ts @@ -1,4 +1,5 @@ import { Component, ElementRef, Input } from '@angular/core'; +import { isNotNil } from '../core/util/check'; import { NzOptionComponent } from './nz-option.component'; @Component({ @@ -41,7 +42,7 @@ export class NzOptionLiComponent { @Input() // tslint:disable-next-line:no-any set nzListOfSelectedValue(valueList: any[]) { - this.selected = valueList.find(v => this.compareWith(v, this.nzOption.nzValue)); + this.selected = isNotNil(valueList.find(v => this.compareWith(v, this.nzOption.nzValue))); } constructor(private elementRef: ElementRef) { diff --git a/components/select/nz-option-li.spec.ts b/components/select/nz-option-li.spec.ts index 8b995cfae0e..dc92311b947 100644 --- a/components/select/nz-option-li.spec.ts +++ b/components/select/nz-option-li.spec.ts @@ -40,6 +40,13 @@ describe('select option li', () => { fixture.detectChanges(); expect(li.nativeElement.classList).toContain('ant-select-dropdown-menu-item-selected'); }); + /** https://github.com/NG-ZORRO/ng-zorro-antd/issues/1229 **/ + it('should zero value work', () => { + testComponent.option.nzValue = { value: 0 }; + testComponent.listOfSelectedValue = [ { value: 0 } ]; + fixture.detectChanges(); + expect(li.nativeElement.classList).toContain('ant-select-dropdown-menu-item-selected'); + }); it('should activeOption null work', () => { testComponent.option.nzValue = { value: 'test' }; testComponent.activeOption = null; diff --git a/components/select/nz-select-top-control.component.ts b/components/select/nz-select-top-control.component.ts index 917ac4afbbf..470be171eba 100644 --- a/components/select/nz-select-top-control.component.ts +++ b/components/select/nz-select-top-control.component.ts @@ -6,6 +6,7 @@ import { trigger } from '@angular/animations'; import { Component, ElementRef, EventEmitter, Input, Output, Renderer2, ViewChild } from '@angular/core'; +import { isNotNil } from '../core/util/check'; import { NzOptionComponent } from './nz-option.component'; @Component({ @@ -137,13 +138,13 @@ export class NzSelectTopControlComponent { updateListOfCachedOption(): void { if (this.isSingleMode) { const selectedOption = this.nzListTemplateOfOption.find(o => this.compareWith(o.nzValue, this.nzListOfSelectedValue[ 0 ])); - if (selectedOption) { + if (isNotNil(selectedOption)) { this.listOfCachedSelectedOption = [ selectedOption ]; } } else { - const listOfCachedOptionFromLatestTemplate = this.nzListTemplateOfOption.filter(o => !!this.nzListOfSelectedValue.find(v => this.compareWith(v, o.nzValue))); - const restSelectedValue = this.nzListOfSelectedValue.filter(v => !listOfCachedOptionFromLatestTemplate.find(o => this.compareWith(o.nzValue, v))); - const listOfCachedOptionFromOld = this.listOfCachedSelectedOption.filter(o => restSelectedValue.find(v => this.compareWith(o.nzValue, v))); + const listOfCachedOptionFromLatestTemplate = this.nzListTemplateOfOption.filter(o => isNotNil(this.nzListOfSelectedValue.find(v => this.compareWith(v, o.nzValue)))); + const restSelectedValue = this.nzListOfSelectedValue.filter(v => !isNotNil(listOfCachedOptionFromLatestTemplate.find(o => this.compareWith(o.nzValue, v)))); + const listOfCachedOptionFromOld = this.listOfCachedSelectedOption.filter(o => isNotNil(restSelectedValue.find(v => this.compareWith(o.nzValue, v)))); this.listOfCachedSelectedOption = listOfCachedOptionFromLatestTemplate.concat(listOfCachedOptionFromOld); } } diff --git a/package.json b/package.json index cc0ac41654c..deae0e1a96c 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "license": "MIT", "description": "An enterprise-class UI components based on Ant Design and Angular", "scripts": { - "site:start": "node site_scripts/generate-site init && ng serve --port 0 --open", + "site:start": "node site_scripts/generate-site init && node site_scripts/generateColorLess && ng serve --port 0 --open", "site:init": "node site_scripts/generate-site init && node site_scripts/generateColorLess", "site": "node site_scripts/generate-site", "ng": "ng",