fix(module:select): fix select zero value & scroll bug (NG-ZORRO#1299)

close NG-ZORRO#1229 close NG-ZORRO#1245
hsuanxyz · Apr 11, 2018 · f274d61 · f274d61
1 parent 2ba3d39
commit f274d61
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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",