fix(module:select): limit number of pasted item to nzMaxMultipleCount (#9080)

Author: Laffery

components/select/select-top-control.component.ts

@@ -12,18 +12,17 @@ import {
   Input,
   NgZone,
   OnChanges,
-  OnDestroy,
   OnInit,
   Output,
   SimpleChanges,
   TemplateRef,
   ViewChild,
   ViewEncapsulation,
   inject,
-  numberAttribute
+  numberAttribute,
+  DestroyRef
 } from '@angular/core';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 import { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
@@ -99,7 +98,7 @@ import { NzSelectItemInterface, NzSelectModeType, NzSelectTopControlItemType } f
   host: { class: 'ant-select-selector' },
   imports: [NzSelectSearchComponent, NzSelectItemComponent, NzSelectPlaceholderComponent]
 })
-export class NzSelectTopControlComponent implements OnChanges, OnInit, OnDestroy {
+export class NzSelectTopControlComponent implements OnChanges, OnInit {
   @Input() nzId: string | null = null;
   @Input() showSearch = false;
   @Input() placeHolder: string | TemplateRef<NzSafeAny> | null = null;
@@ -123,8 +122,6 @@ export class NzSelectTopControlComponent implements OnChanges, OnInit, OnDestroy
   isComposing = false;
   inputValue: string | null = null;
 
-  private destroy$ = new Subject<void>();
-
   updateTemplateVariable(): void {
     const isSelectedValueEmpty = this.listOfTopItem.length === 0;
     this.isShowPlaceholder = isSelectedValueEmpty && !this.isComposing && !this.inputValue;
@@ -196,13 +193,11 @@ export class NzSelectTopControlComponent implements OnChanges, OnInit, OnDestroy
     }
   }
 
+  private destroyRef = inject(DestroyRef);
+  private elementRef = inject(ElementRef<HTMLElement>);
+  private ngZone = inject(NgZone);
   noAnimation = inject(NzNoAnimationDirective, { host: true, optional: true });
 
-  constructor(
-    private elementRef: ElementRef<HTMLElement>,
-    private ngZone: NgZone
-  ) {}
-
   ngOnChanges(changes: SimpleChanges): void {
     const { listOfTopItem, maxTagCount, customTemplate, maxTagPlaceholder } = changes;
     if (listOfTopItem) {
@@ -234,7 +229,7 @@ export class NzSelectTopControlComponent implements OnChanges, OnInit, OnDestroy
 
   ngOnInit(): void {
     fromEventOutsideAngular<MouseEvent>(this.elementRef.nativeElement, 'click')
-      .pipe(takeUntil(this.destroy$))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(event => {
         // `HTMLElement.focus()` is a native DOM API which doesn't require Angular to run change detection.
         if (event.target !== this.nzSelectSearchComponent.inputElement.nativeElement) {
@@ -243,7 +238,7 @@ export class NzSelectTopControlComponent implements OnChanges, OnInit, OnDestroy
       });
 
     fromEventOutsideAngular<KeyboardEvent>(this.elementRef.nativeElement, 'keydown')
-      .pipe(takeUntil(this.destroy$))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(event => {
         if (event.target instanceof HTMLInputElement) {
           const inputValue = event.target.value;
@@ -256,8 +251,4 @@ export class NzSelectTopControlComponent implements OnChanges, OnInit, OnDestroy
         }
       });
   }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-  }
 }

components/select/select.component.ts

@@ -453,13 +453,21 @@ export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterCon
       .filter(item => listOfLabel.findIndex(label => label === item.nzLabel) !== -1)
       .map(item => item.nzValue)
       .filter(item => this.listOfValue.findIndex(v => this.compareWith(v, item)) === -1);
+    /**
+     * Limit the number of selected item to nzMaxMultipleCount
+     */
+    const limitWithinMaxCount = <T>(value: T[]): T[] =>
+      this.isMaxMultipleCountSet ? value.slice(0, this.nzMaxMultipleCount) : value;
+
     if (this.nzMode === 'multiple') {
-      this.updateListOfValue([...this.listOfValue, ...listOfMatchedValue]);
+      const updateValue = limitWithinMaxCount([...this.listOfValue, ...listOfMatchedValue]);
+      this.updateListOfValue(updateValue);
     } else if (this.nzMode === 'tags') {
       const listOfUnMatchedLabel = listOfLabel.filter(
         label => this.listOfTagAndTemplateItem.findIndex(item => item.nzLabel === label) === -1
       );
-      this.updateListOfValue([...this.listOfValue, ...listOfMatchedValue, ...listOfUnMatchedLabel]);
+      const updateValue = limitWithinMaxCount([...this.listOfValue, ...listOfMatchedValue, ...listOfUnMatchedLabel]);
+      this.updateListOfValue(updateValue);
     }
     this.clearInput();
   }

components/select/select.spec.ts

@@ -1310,6 +1310,27 @@ describe('select', () => {
       expect(component.value[0]).toBe('test_01');
     }));
 
+    it('should nzTokenSeparators + nzMaxMultipleCount work', fakeAsync(() => {
+      component.nzMaxMultipleCount = 1;
+      component.listOfOption = [
+        { value: 'test_01', label: 'label_01' },
+        { value: 'test_02', label: 'label_02' }
+      ];
+      component.value = [];
+      component.nzTokenSeparators = [','];
+      fixture.detectChanges();
+      flush();
+      fixture.detectChanges();
+      const inputElement = selectElement.querySelector('input')!;
+      inputElement.value = 'label_01,label_02';
+      dispatchFakeEvent(inputElement, 'input');
+      fixture.detectChanges();
+      flush();
+      fixture.detectChanges();
+      expect(component.value.length).toBe(1);
+      expect(component.value[0]).toBe('test_01');
+    }));
+
     it('should nzMaxMultipleCount work', fakeAsync(() => {
       const flushRefresh = (): void => {
         fixture.detectChanges();
@@ -1497,6 +1518,27 @@ describe('select', () => {
       expect(component.value[1]).toBe('test_02');
     }));
 
+    it('should nzTokenSeparators + nzMaxMultipleCount work', fakeAsync(() => {
+      component.nzMaxMultipleCount = 1;
+      component.listOfOption = [
+        { value: 'test_01', label: 'label_01' },
+        { value: 'test_02', label: 'label_02' }
+      ];
+      component.value = [];
+      component.nzTokenSeparators = [','];
+      fixture.detectChanges();
+      flush();
+      fixture.detectChanges();
+      const inputElement = selectElement.querySelector('input')!;
+      inputElement.value = 'label_01,label_02';
+      dispatchFakeEvent(inputElement, 'input');
+      fixture.detectChanges();
+      flush();
+      fixture.detectChanges();
+      expect(component.value.length).toBe(1);
+      expect(component.value[0]).toBe('test_01');
+    }));
+
     it('should nzMaxTagCount works', fakeAsync(() => {
       component.listOfOption = [
         { value: 'test_01', label: 'label_01' },
@@ -2021,6 +2063,7 @@ export class TestSelectReactiveMultipleComponent {
       [nzOptions]="listOfOption"
       [nzSize]="nzSize"
       [nzMaxTagCount]="nzMaxTagCount"
+      [nzMaxMultipleCount]="nzMaxMultipleCount"
       [nzTokenSeparators]="nzTokenSeparators"
       [nzMaxTagPlaceholder]="nzMaxTagPlaceholder ?? null"
       (ngModelChange)="valueChange($event)"
@@ -2037,6 +2080,7 @@ export class TestSelectReactiveTagsComponent {
   valueChange = jasmine.createSpy('valueChange');
   nzTokenSeparators: string[] = [];
   nzMaxTagPlaceholder?: TemplateRef<NzSafeAny>;
+  nzMaxMultipleCount?: number;
 }
 
 @Component({