fix(module:select): disable nzMaxMultipleCount in default mode (#9068)

Author: Laffery

components/core/util/convert.ts

@@ -21,6 +21,10 @@ export function numberAttributeWithOneFallback(value: unknown): number {
   return numberAttribute(value, 1);
 }
 
+export function numberAttributeWithInfinityFallback(value: unknown): number {
+  return numberAttribute(value, Infinity);
+}
+
 export function toNumber(value: number | string): number;
 export function toNumber<D>(value: number | string, fallback: D): number | D;
 export function toNumber(value: number | string, fallbackValue: number = 0): number {

components/select/select-arrow.component.ts

@@ -3,19 +3,16 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Input,
-  TemplateRef,
-  ViewEncapsulation,
-  numberAttribute
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
 
 import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
+import { numberAttributeWithInfinityFallback } from 'ng-zorro-antd/core/util';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 
+/**
+ * @internal
+ */
 @Component({
   selector: 'nz-select-arrow',
   encapsulation: ViewEncapsulation.None,
@@ -57,5 +54,5 @@ export class NzSelectArrowComponent {
   @Input() isMaxMultipleCountSet = false;
   @Input() suffixIcon: TemplateRef<NzSafeAny> | string | null = null;
   @Input() feedbackIcon: TemplateRef<NzSafeAny> | string | null = null;
-  @Input({ transform: numberAttribute }) nzMaxMultipleCount: number = Infinity;
+  @Input({ transform: numberAttributeWithInfinityFallback }) nzMaxMultipleCount = Infinity;
 }

components/select/select.component.ts

@@ -59,7 +59,12 @@ import {
   OnChangeType,
   OnTouchedType
 } from 'ng-zorro-antd/core/types';
-import { fromEventOutsideAngular, getStatusClassNames, isNotNil } from 'ng-zorro-antd/core/util';
+import {
+  fromEventOutsideAngular,
+  getStatusClassNames,
+  isNotNil,
+  numberAttributeWithInfinityFallback
+} from 'ng-zorro-antd/core/util';
 import { NZ_SPACE_COMPACT_ITEM_TYPE, NZ_SPACE_COMPACT_SIZE, NzSpaceCompactItemDirective } from 'ng-zorro-antd/space';
 
 import { NzOptionContainerComponent } from './option-container.component';
@@ -246,7 +251,7 @@ export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterCon
   @Input() nzMenuItemSelectedIcon: TemplateRef<NzSafeAny> | null = null;
   @Input() nzTokenSeparators: string[] = [];
   @Input() nzMaxTagPlaceholder: TemplateRef<{ $implicit: NzSafeAny[] }> | null = null;
-  @Input() nzMaxMultipleCount = Infinity;
+  @Input({ transform: numberAttributeWithInfinityFallback }) nzMaxMultipleCount = Infinity;
   @Input() nzMode: NzSelectModeType = 'default';
   @Input() nzFilterOption: NzFilterOptionType = defaultFilterOption;
   @Input() compareWith: (o1: NzSafeAny, o2: NzSafeAny) => boolean = (o1: NzSafeAny, o2: NzSafeAny) => o1 === o2;
@@ -271,8 +276,12 @@ export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterCon
     return this._nzShowArrow === undefined ? this.nzMode === 'default' : this._nzShowArrow;
   }
 
+  get isMultiple(): boolean {
+    return this.nzMode === 'multiple' || this.nzMode === 'tags';
+  }
+
   get isMaxMultipleCountSet(): boolean {
-    return this.nzMaxMultipleCount !== Infinity;
+    return this.isMultiple && this.nzMaxMultipleCount !== Infinity;
   }
 
   get isMaxMultipleCountReached(): boolean {

components/select/select.spec.ts

@@ -23,6 +23,7 @@ import { NzSelectModule } from './select.module';
 import {
   NzFilterOptionType,
   NzSelectItemInterface,
+  NzSelectModeType,
   NzSelectOptionInterface,
   NzSelectPlacementType
 } from './select.types';
@@ -1342,6 +1343,10 @@ describe('select', () => {
       component.nzMaxMultipleCount = 1;
       fixture.detectChanges();
       expect(selectComponent.isMaxMultipleCountSet).toBeTruthy();
+
+      component.nzMode = 'default';
+      fixture.detectChanges();
+      expect(selectComponent.isMaxMultipleCountSet).toBeFalsy();
     });
 
     it('should isMaxMultipleCountReached be set correctly when click options', fakeAsync(() => {
@@ -1975,7 +1980,7 @@ export class TestSelectReactiveDefaultComponent {
   imports: [FormsModule, NzSelectModule],
   template: `
     <nz-select
-      nzMode="multiple"
+      [nzMode]="nzMode"
       [(ngModel)]="value"
       [nzOptions]="listOfOption"
       [nzMenuItemSelectedIcon]="nzMenuItemSelectedIcon"
@@ -2002,6 +2007,7 @@ export class TestSelectReactiveMultipleComponent {
   nzRemoveIcon: TemplateRef<NzSafeAny> | null = null;
   nzTokenSeparators: string[] = [];
   nzMaxMultipleCount = Infinity;
+  nzMode: NzSelectModeType = 'multiple';
   compareWith: (o1: NzSafeAny, o2: NzSafeAny) => boolean = (o1: NzSafeAny, o2: NzSafeAny) => o1 === o2;
   nzAutoClearSearchValue = true;
 }