fix(module:select): dropdown can be opened when disabled (#6008)

close #6005 close #6007
NG-ZORRO · Nov 6, 2020 · 79c52ea · 79c52ea
1 parent 516bf97
commit 79c52ea
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 25 deletions.
diff --git a/components/select/select-top-control.component.ts b/components/select/select-top-control.component.ts
@@ -57,16 +57,6 @@ import { NzSelectItemInterface, NzSelectModeType, NzSelectTopControlItemType } f
       </ng-container>
       <ng-container *ngSwitchDefault>
         <!--multiple or tags mode-->
-        <nz-select-search
-          [disabled]="disabled"
-          [value]="inputValue!"
-          [autofocus]="autofocus"
-          [showInput]="true"
-          [mirrorSync]="true"
-          [focusTrigger]="open"
-          (isComposingChange)="isComposingChange($event)"
-          (valueChange)="onInputValueChange($event)"
-        ></nz-select-search>
         <nz-select-item
           *ngFor="let item of listOfSlicedItem; trackBy: trackValue"
           [@zoomMotion]
@@ -81,13 +71,22 @@ import { NzSelectItemInterface, NzSelectModeType, NzSelectTopControlItemType } f
           (@zoomMotion.done)="onAnimationEnd()"
           (delete)="onDeleteItem(item.contentTemplateOutletContext)"
         ></nz-select-item>
+        <nz-select-search
+          [disabled]="disabled"
+          [value]="inputValue!"
+          [autofocus]="autofocus"
+          [showInput]="true"
+          [mirrorSync]="true"
+          [focusTrigger]="open"
+          (isComposingChange)="isComposingChange($event)"
+          (valueChange)="onInputValueChange($event)"
+        ></nz-select-search>
       </ng-container>
     </ng-container>
     <nz-select-placeholder *ngIf="isShowPlaceholder" [placeholder]="placeHolder"></nz-select-placeholder>
   `,
   host: {
     '[class.ant-select-selector]': 'true',
-    '(click)': 'onHostClick()',
     '(keydown)': 'onHostKeydown($event)'
   }
 })
@@ -108,24 +107,13 @@ export class NzSelectTopControlComponent implements OnChanges {
   @Output() readonly inputValueChange = new EventEmitter<string>();
   @Output() readonly animationEnd = new EventEmitter<void>();
   @Output() readonly deleteItem = new EventEmitter<NzSelectItemInterface>();
-  @Output() readonly openChange = new EventEmitter<boolean>();
   @ViewChild(NzSelectSearchComponent) nzSelectSearchComponent!: NzSelectSearchComponent;
   listOfSlicedItem: NzSelectTopControlItemType[] = [];
   isShowPlaceholder = true;
   isShowSingleLabel = false;
   isComposing = false;
   inputValue: string | null = null;
 
-  onHostClick(): void {
-    if (this.open && this.showSearch) {
-      return;
-    }
-
-    if (!this.disabled) {
-      this.openChange.next(!this.open);
-    }
-  }
-
   onHostKeydown(e: KeyboardEvent): void {
     const inputValue = (e.target as HTMLInputElement).value;
     if (e.keyCode === BACKSPACE && this.mode !== 'default' && !inputValue && this.listOfTopItem.length > 0) {

diff --git a/components/select/select.component.ts b/components/select/select.component.ts
@@ -92,7 +92,6 @@ export type NzSelectSizeType = 'large' | 'default' | 'small';
       (animationEnd)="updateCdkConnectedOverlayPositions()"
       (deleteItem)="onItemDelete($event)"
       (keydown)="onKeyDown($event)"
-      (openChange)="setOpenState($event)"
     ></nz-select-top-control>
     <nz-select-clear
       *ngIf="nzAllowClear && !nzDisabled && listOfValue.length"
@@ -104,7 +103,6 @@ export type NzSelectSizeType = 'large' | 'default' | 'small';
       [loading]="nzLoading"
       [search]="nzOpen && nzShowSearch"
       [suffixIcon]="nzSuffixIcon"
-      (click)="setOpenState(!nzOpen)"
     ></nz-select-arrow>
     <ng-template
       cdkConnectedOverlay
@@ -156,7 +154,8 @@ export type NzSelectSizeType = 'large' | 'default' | 'small';
     '[class.ant-select-open]': 'nzOpen',
     '[class.ant-select-focused]': 'nzOpen || focused',
     '[class.ant-select-single]': `nzMode === 'default'`,
-    '[class.ant-select-multiple]': `nzMode !== 'default'`
+    '[class.ant-select-multiple]': `nzMode !== 'default'`,
+    '(click)': 'onHostClick()'
   }
 })
 export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterViewInit, OnDestroy, AfterContentInit, OnChanges {
@@ -281,6 +280,14 @@ export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterVie
     this.clearInput();
   }
 
+  onHostClick(): void {
+    if ((this.nzOpen && this.nzShowSearch) || this.nzDisabled) {
+      return;
+    }
+
+    this.setOpenState(!this.nzOpen);
+  }
+
   updateListOfContainerItem(): void {
     let listOfContainerItem = this.listOfTagAndTemplateItem
       .filter(item => !item.nzHide)