fix(module:mention): not emit nzOnSearchChange when value is empty (#…

…5729) close #5722
NG-ZORRO · Sep 10, 2020 · 4cc14ba · 4cc14ba
1 parent 76931ac
commit 4cc14ba
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 5 deletions.
diff --git a/components/mention/mention.component.ts b/components/mention/mention.component.ts
@@ -234,7 +234,14 @@ export class NzMentionComponent implements OnDestroy, OnInit, OnChanges {
 
   private suggestionsFilter(value: string, emit: boolean): void {
     const suggestions = value.substring(1);
-    if (this.previousValue === value) {
+    /**
+     * Should always emit (nzOnSearchChange) when value empty
+     *
+     * @[something]... @[empty]... @[empty]
+     *     ^             ^           ^
+     * preValue        preValue  (should emit)
+     */
+    if (this.previousValue === value && value !== this.cursorMention![0]) {
       return;
     }
     this.previousValue = value;

diff --git a/components/mention/nz-mention.spec.ts b/components/mention/nz-mention.spec.ts
@@ -404,6 +404,27 @@ describe('mention', () => {
       expect(mention.isOpen).toBe(true);
     });
 
+    it('should emit nzOnSearchChange when type in @ prefix', () => {
+      spyOn(fixture.componentInstance, 'onSearchChange');
+
+      dispatchFakeEvent(textarea, 'click');
+      fixture.detectChanges();
+      typeInElement('@test', textarea);
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.onSearchChange).toHaveBeenCalledTimes(1);
+
+      typeInElement('@test  @', textarea);
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.onSearchChange).toHaveBeenCalledTimes(2);
+
+      typeInElement('@test  @ @', textarea);
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.onSearchChange).toHaveBeenCalledTimes(3);
+    });
+
     it('should open the dropdown when the type in # prefix', () => {
       fixture.componentInstance.setArrayPrefix();
       dispatchFakeEvent(textarea, 'click');
@@ -436,8 +457,13 @@ describe('mention', () => {
 @Component({
   template: `
     <nz-mention [nzSuggestions]="suggestions">
-      <textarea *ngIf="!inputTrigger" nz-input [nzAutosize]="{ minRows: 4, maxRows: 4 }" [(ngModel)]="inputValue" nzMentionTrigger>
-      </textarea>
+      <textarea
+        *ngIf="!inputTrigger"
+        nz-input
+        [nzAutosize]="{ minRows: 4, maxRows: 4 }"
+        [(ngModel)]="inputValue"
+        nzMentionTrigger
+      ></textarea>
       <input *ngIf="inputTrigger" nz-input [(ngModel)]="inputValue" nzMentionTrigger />
     </nz-mention>
   `
@@ -452,8 +478,15 @@ class NzTestSimpleMentionComponent {
 
 @Component({
   template: `
-    <nz-mention [nzSuggestions]="webFrameworks" [nzValueWith]="valueWith" [nzPrefix]="prefix" [nzPlacement]="'top'" [nzLoading]="loading">
-      <textarea nz-input [nzAutosize]="{ minRows: 4, maxRows: 4 }" [(ngModel)]="inputValue" nzMentionTrigger> </textarea>
+    <nz-mention
+      [nzSuggestions]="webFrameworks"
+      [nzValueWith]="valueWith"
+      [nzPrefix]="prefix"
+      [nzPlacement]="'top'"
+      [nzLoading]="loading"
+      (nzOnSearchChange)="onSearchChange()"
+    >
+      <textarea nz-input [nzAutosize]="{ minRows: 4, maxRows: 4 }" [(ngModel)]="inputValue" nzMentionTrigger></textarea>
       <ng-container *nzMentionSuggestion="let framework">
         <span class="custom">{{ framework.name }} - {{ framework.type }}</span>
       </ng-container>
@@ -479,6 +512,10 @@ class NzTestPropertyMentionComponent {
     this.prefix = ['@', '#'];
   }
 
+  onSearchChange(): void {
+    // noop
+  }
+
   fetchSuggestions(): void {
     this.webFrameworks = [];
     this.loading = true;