fix(module:select): fix select input not grow correctly in IE (#4262)

close #2427 close #3907
NG-ZORRO · Oct 10, 2019 · 9be58d9 · 9be58d9
1 parent 0085fca
commit 9be58d9
Show file tree

Hide file tree

Showing 26 changed files with 247 additions and 118 deletions.
diff --git a/README-zh_CN.md b/README-zh_CN.md
@@ -157,6 +157,7 @@ $ npm run site:start
 - [Ververica](https://www.ververica.com/)
 - [Apache Flink](https://flink.apache.org/)
 - [Process Automation Group](http://pag.company/)
+- [ScentBird](https://www.scentbird.com/)
 - [Southern Institute of Technology](https://www.sit.ac.nz/)
 - [Hapify (Dynamic boilerplates tool)](https://hub.hapify.io/)
 

diff --git a/README.md b/README.md
@@ -160,6 +160,7 @@ As always, we encourage experienced users to help those who are not familiar wit
 - [UC Express](http://www.uce.cn/)
 - [Qingflow](https://qingflow.com/)
 - [DataGrand](http://datagrand.com/)
+- [ScentBird](https://www.scentbird.com/)
 - [Southern Institute of Technology](https://www.sit.ac.nz/)
 - [Hapify (Dynamic boilerplates tool)](https://hub.hapify.io/)
 

diff --git a/components/select/demo/automatic-tokenization.ts b/components/select/demo/automatic-tokenization.ts
@@ -7,12 +7,18 @@ import { Component, OnInit } from '@angular/core';
       [(ngModel)]="listOfTagOptions"
       nzMode="tags"
       [nzTokenSeparators]="[',']"
-      style="width: 100%;"
       nzPlaceHolder="automatic tokenization"
     >
-      <nz-option *ngFor="let option of listOfOption" [nzLabel]="option.label" [nzValue]="option.value"> </nz-option>
+      <nz-option *ngFor="let option of listOfOption" [nzLabel]="option.label" [nzValue]="option.value"></nz-option>
     </nz-select>
-  `
+  `,
+  styles: [
+    `
+      nz-select {
+        width: 100%;
+      }
+    `
+  ]
 })
 export class NzDemoSelectAutomaticTokenizationComponent implements OnInit {
   listOfOption: Array<{ label: string; value: string }> = [];

diff --git a/components/select/demo/basic.ts b/components/select/demo/basic.ts
@@ -4,15 +4,15 @@ import { Component } from '@angular/core';
   selector: 'nz-demo-select-basic',
   template: `
     <div>
-      <nz-select style="width: 120px;" [(ngModel)]="selectedValue" nzAllowClear nzPlaceHolder="Choose">
+      <nz-select [(ngModel)]="selectedValue" nzAllowClear nzPlaceHolder="Choose">
         <nz-option nzValue="jack" nzLabel="Jack"></nz-option>
         <nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
         <nz-option nzValue="disabled" nzLabel="Disabled" nzDisabled></nz-option>
       </nz-select>
-      <nz-select style="width: 120px;" [ngModel]="'lucy'" nzDisabled>
+      <nz-select [ngModel]="'lucy'" nzDisabled>
         <nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
       </nz-select>
-      <nz-select style="width: 120px;" [ngModel]="'lucy'" nzLoading>
+      <nz-select [ngModel]="'lucy'" nzLoading>
         <nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
       </nz-select>
     </div>
@@ -21,6 +21,7 @@ import { Component } from '@angular/core';
     `
       nz-select {
         margin-right: 8px;
+        width: 120px;
       }
     `
   ]

diff --git a/components/select/demo/coordinate.ts b/components/select/demo/coordinate.ts
@@ -4,10 +4,10 @@ import { Component } from '@angular/core';
   selector: 'nz-demo-select-coordinate',
   template: `
     <div>
-      <nz-select style="width: 120px;" [(ngModel)]="selectedProvince" (ngModelChange)="provinceChange($event)">
+      <nz-select [(ngModel)]="selectedProvince" (ngModelChange)="provinceChange($event)">
         <nz-option *ngFor="let p of provinceData" [nzValue]="p" [nzLabel]="p"></nz-option>
       </nz-select>
-      <nz-select style="width: 120px;" [(ngModel)]="selectedCity">
+      <nz-select [(ngModel)]="selectedCity">
         <nz-option *ngFor="let c of cityData[selectedProvince]" [nzValue]="c" [nzLabel]="c"></nz-option>
       </nz-select>
     </div>
@@ -16,6 +16,7 @@ import { Component } from '@angular/core';
     `
       nz-select {
         margin-right: 8px;
+        width: 120px;
       }
     `
   ]

diff --git a/components/select/demo/custom-content.ts b/components/select/demo/custom-content.ts
@@ -3,16 +3,23 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-select-custom-content',
   template: `
-    <nz-select style="width: 200px;" nzShowSearch nzAllowClear nzPlaceHolder="Select OS" [(ngModel)]="selectedOS">
+    <nz-select nzShowSearch nzAllowClear nzPlaceHolder="Select OS" [(ngModel)]="selectedOS">
       <nz-option nzCustomContent nzLabel="Windows" nzValue="windows"
         ><i nz-icon nzType="windows"></i> Windows</nz-option
       >
       <nz-option nzCustomContent nzLabel="Mac" nzValue="mac"><i nz-icon nzType="apple"></i> Mac</nz-option>
       <nz-option nzCustomContent nzLabel="Android" nzValue="android"
-        ><i nz-icon nzType="android"></i> Android</nz-option
-      >
+        ><i nz-icon nzType="android"></i> Android
+      </nz-option>
     </nz-select>
-  `
+  `,
+  styles: [
+    `
+      nz-select {
+        width: 200px;
+      }
+    `
+  ]
 })
 export class NzDemoSelectCustomContentComponent {
   selectedOS = null;

diff --git a/components/select/demo/custom-dropdown-menu.ts b/components/select/demo/custom-dropdown-menu.ts
@@ -3,14 +3,30 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-select-custom-dropdown-menu',
   template: `
-    <nz-select style="width: 120px;" nzShowSearch nzAllowClear [ngModel]="'lucy'" [nzDropdownRender]="render">
+    <nz-select nzShowSearch nzAllowClear [ngModel]="'lucy'" [nzDropdownRender]="render">
       <nz-option nzValue="jack" nzLabel="Jack"></nz-option>
       <nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
     </nz-select>
     <ng-template #render>
-      <nz-divider style="margin: 4px 0;"></nz-divider>
-      <div style="padding: 8px; cursor: pointer"><i nz-icon nzType="plus"></i> Add item</div>
+      <nz-divider></nz-divider>
+      <div class="add-item"><i nz-icon nzType="plus"></i> Add item</div>
     </ng-template>
-  `
+  `,
+  styles: [
+    `
+      nz-select {
+        width: 120px;
+      }
+
+      nz-divider {
+        margin: 4px 0;
+      }
+
+      .add-item {
+        padding: 8px;
+        cursor: pointer;
+      }
+    `
+  ]
 })
 export class NzDemoSelectCustomDropdownMenuComponent {}
diff --git a/components/select/demo/custom-template.ts b/components/select/demo/custom-template.ts
@@ -3,25 +3,26 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-select-custom-template',
   template: `
-    <nz-select
-      style="width: 200px;"
-      nzAllowClear
-      nzPlaceHolder="Select OS"
-      [(ngModel)]="selectedOS"
-      [nzCustomTemplate]="custom"
-    >
+    <nz-select nzAllowClear nzPlaceHolder="Select OS" [(ngModel)]="selectedOS" [nzCustomTemplate]="custom">
       <nz-option nzCustomContent nzLabel="Windows" nzValue="windows"
-        ><i nz-icon nzType="windows"></i> Windows</nz-option
-      >
+        ><i nz-icon nzType="windows"></i> Windows
+      </nz-option>
       <nz-option nzCustomContent nzLabel="Mac" nzValue="mac"><i nz-icon nzType="apple"></i> Mac</nz-option>
       <nz-option nzCustomContent nzLabel="Android" nzValue="android"
-        ><i nz-icon nzType="android"></i> Android</nz-option
-      >
+        ><i nz-icon nzType="android"></i> Android
+      </nz-option>
     </nz-select>
     <ng-template #custom let-selected>
       <span>Label: {{ selected.nzLabel }} Value: {{ selected.nzValue }}</span>
     </ng-template>
-  `
+  `,
+  styles: [
+    `
+      nz-select {
+        width: 200px;
+      }
+    `
+  ]
 })
 export class NzDemoSelectCustomTemplateComponent {
   selectedOS = null;

diff --git a/components/select/demo/default-value.ts b/components/select/demo/default-value.ts
@@ -3,22 +3,24 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-select-default-value',
   template: `
-    <nz-select
-      style="width: 100%"
-      nzMode="multiple"
-      nzPlaceHolder="Inserted are removed"
-      [(ngModel)]="listOfSelectedValue"
-    >
+    <nz-select nzMode="multiple" nzPlaceHolder="Inserted are removed" [(ngModel)]="listOfSelectedValue">
       <nz-option *ngFor="let option of listOfOption" [nzLabel]="option" [nzValue]="option"></nz-option>
       <nz-option *ngFor="let option of defaultOption" [nzLabel]="option" [nzValue]="option" nzHide></nz-option>
     </nz-select>
     <br />
     <br />
-    <nz-select style="width: 100%" [(ngModel)]="selectedValue">
+    <nz-select [(ngModel)]="selectedValue">
       <nz-option *ngFor="let option of listOfOption" [nzLabel]="option" [nzValue]="option"></nz-option>
       <nz-option nzLabel="Default Value" nzValue="Default" nzHide></nz-option>
     </nz-select>
-  `
+  `,
+  styles: [
+    `
+      nz-select {
+        width: 100%;
+      }
+    `
+  ]
 })
 export class NzDemoSelectDefaultValueComponent {
   listOfOption = ['Option 01', 'Option 02'];

diff --git a/components/select/demo/frontend-search.md b/components/select/demo/frontend-search.md
@@ -0,0 +1,15 @@
+---
+order: 20
+title:
+  zh-CN: 前端搜索
+  en-US: Select with font-end search
+---
+
+## zh-CN
+
+当数据量过大时，在前端根据搜索关键字对数据进行处理后二次展示
+
+## en-US
+
+Search the options in the frontend.
+
diff --git a/components/select/demo/frontend-search.ts b/components/select/demo/frontend-search.ts
@@ -0,0 +1,46 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-select-frontend-search',
+  template: `
+    <nz-select
+      nzMode="multiple"
+      [(ngModel)]="selectedUser"
+      nzPlaceHolder="Type a10 to search"
+      nzAllowClear
+      nzShowSearch
+      [nzServerSearch]="true"
+      (nzOnSearch)="onSearch($event)"
+    >
+      <nz-option *ngFor="let o of optionList" [nzValue]="o" [nzLabel]="o"></nz-option>
+      <nz-option *ngIf="displayTips" nzDisabled nzCustomContent>
+        Type at lease 2 letters to Search
+      </nz-option>
+    </nz-select>
+  `,
+  styles: [
+    `
+      nz-select {
+        width: 100%;
+      }
+    `
+  ]
+})
+export class NzDemoSelectFrontendSearchComponent {
+  bigList: string[] = new Array(10000).fill(0).map((_, i) => i.toString(36) + i);
+  optionList: string[] = [];
+  selectedUser: string;
+  displayTips = true;
+
+  onSearch(value: string): void {
+    if (value && value.length > 1) {
+      this.optionList = this.bigList.filter(item => item.indexOf(value) > -1);
+      this.displayTips = false;
+    } else {
+      this.optionList = [];
+      this.displayTips = true;
+    }
+  }
+
+  constructor() {}
+}
diff --git a/components/select/demo/hide-selected.ts b/components/select/demo/hide-selected.ts
@@ -3,17 +3,22 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-select-hide-selected',
   template: `
-    <nz-select
-      style="width: 100%"
-      nzMode="multiple"
-      nzPlaceHolder="Inserted are removed"
-      [(ngModel)]="listOfSelectedValue"
-    >
-      <ng-container *ngFor="let option of listOfOption">
-        <nz-option [nzLabel]="option" [nzValue]="option" [nzHide]="!isNotSelected(option)"></nz-option>
-      </ng-container>
+    <nz-select nzMode="multiple" nzPlaceHolder="Inserted are removed" [(ngModel)]="listOfSelectedValue">
+      <nz-option
+        *ngFor="let option of listOfOption"
+        [nzLabel]="option"
+        [nzValue]="option"
+        [nzHide]="!isNotSelected(option)"
+      ></nz-option>
     </nz-select>
-  `
+  `,
+  styles: [
+    `
+      nz-select {
+        width: 100%;
+      }
+    `
+  ]
 })
 export class NzDemoSelectHideSelectedComponent {
   listOfOption = ['Apples', 'Nails', 'Bananas', 'Helicopters'];

diff --git a/components/select/demo/label-in-value.ts b/components/select/demo/label-in-value.ts
@@ -6,7 +6,6 @@ import { Component } from '@angular/core';
     <p>The selected option's age is {{ selectedValue?.age }}</p>
     <br />
     <nz-select
-      style="width: 120px;"
       [(ngModel)]="selectedValue"
       [compareWith]="compareFn"
       (ngModelChange)="log($event)"
@@ -15,7 +14,14 @@ import { Component } from '@angular/core';
     >
       <nz-option *ngFor="let option of optionList" [nzValue]="option" [nzLabel]="option.label"></nz-option>
     </nz-select>
-  `
+  `,
+  styles: [
+    `
+      nz-select {
+        width: 120px;
+      }
+    `
+  ]
 })
 export class NzDemoSelectLabelInValueComponent {
   optionList = [{ label: 'Lucy', value: 'lucy', age: 20 }, { label: 'Jack', value: 'jack', age: 22 }];

diff --git a/components/select/demo/multiple.ts b/components/select/demo/multiple.ts
@@ -6,15 +6,21 @@ import { Component, OnInit } from '@angular/core';
     <nz-select
       [nzMaxTagCount]="3"
       [nzMaxTagPlaceholder]="tagPlaceHolder"
-      style="width: 100%"
       nzMode="multiple"
       nzPlaceHolder="Please select"
       [(ngModel)]="listOfSelectedValue"
     >
       <nz-option *ngFor="let option of listOfOption" [nzLabel]="option.label" [nzValue]="option.value"></nz-option>
     </nz-select>
     <ng-template #tagPlaceHolder let-selectedList> and {{ selectedList.length }} more selected </ng-template>
-  `
+  `,
+  styles: [
+    `
+      nz-select {
+        width: 100%;
+      }
+    `
+  ]
 })
 export class NzDemoSelectMultipleComponent implements OnInit {
   listOfOption: Array<{ label: string; value: string }> = [];

diff --git a/components/select/demo/optgroup.ts b/components/select/demo/optgroup.ts
@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-select-optgroup',
   template: `
-    <nz-select style="width: 120px;" [(ngModel)]="selectedValue" nzAllowClear nzPlaceHolder="Choose">
+    <nz-select [(ngModel)]="selectedValue" nzAllowClear nzPlaceHolder="Choose">
       <nz-option-group nzLabel="Manager">
         <nz-option nzValue="jack" nzLabel="Jack"></nz-option>
         <nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
@@ -12,7 +12,14 @@ import { Component } from '@angular/core';
         <nz-option nzValue="Tom" nzLabel="tom"></nz-option>
       </nz-option-group>
     </nz-select>
-  `
+  `,
+  styles: [
+    `
+      nz-select {
+        width: 120px;
+      }
+    `
+  ]
 })
 export class NzDemoSelectOptgroupComponent {
   selectedValue = 'lucy';