fix(module:input): fix input group missing focus and disabled (#5082)

close #5064

components/input/input-group.component.ts

@@ -6,20 +6,27 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
+import { FocusMonitor } from '@angular/cdk/a11y';
 import {
   AfterContentInit,
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   ContentChildren,
+  ElementRef,
   Input,
   OnChanges,
+  OnDestroy,
+  OnInit,
   QueryList,
   SimpleChanges,
   TemplateRef,
   ViewEncapsulation
 } from '@angular/core';
 import { BooleanInput, NgClassType, NzSizeLDSType } from 'ng-zorro-antd/core/types';
 import { InputBoolean } from 'ng-zorro-antd/core/util';
+import { merge, Subject } from 'rxjs';
+import { flatMap, map, startWith, switchMap, takeUntil } from 'rxjs/operators';
 import { NzInputDirective } from './input.directive';
 
 @Component({
@@ -78,14 +85,16 @@ import { NzInputDirective } from './input.directive';
     '[class.ant-input-group-wrapper-lg]': `isAddOn && isLarge`,
     '[class.ant-input-group-wrapper-sm]': `isAddOn && isSmall`,
     '[class.ant-input-affix-wrapper]': `isAffix && !isAddOn`,
+    '[class.ant-input-affix-wrapper-focused]': `isAffix && focused`,
+    '[class.ant-input-affix-wrapper-disabled]': `isAffix && disabled`,
     '[class.ant-input-affix-wrapper-lg]': `isAffix && !isAddOn && isLarge`,
     '[class.ant-input-affix-wrapper-sm]': `isAffix && !isAddOn && isSmall`,
     '[class.ant-input-group]': `!isAffix && !isAddOn`,
     '[class.ant-input-group-lg]': `!isAffix && !isAddOn && isLarge`,
     '[class.ant-input-group-sm]': `!isAffix && !isAddOn && isSmall`
   }
 })
-export class NzInputGroupComponent implements AfterContentInit, OnChanges {
+export class NzInputGroupComponent implements AfterContentInit, OnChanges, OnInit, OnDestroy {
   static ngAcceptInputType_nzSearch: BooleanInput;
   static ngAcceptInputType_nzCompact: BooleanInput;
 
@@ -105,15 +114,44 @@ export class NzInputGroupComponent implements AfterContentInit, OnChanges {
   isSmall = false;
   isAffix = false;
   isAddOn = false;
+  focused = false;
+  disabled = false;
+  private destroy$ = new Subject<void>();
+
+  constructor(private focusMonitor: FocusMonitor, private elementRef: ElementRef, private cdr: ChangeDetectorRef) {}
 
   updateChildrenInputSize(): void {
     if (this.listOfNzInputDirective) {
       this.listOfNzInputDirective.forEach(item => (item.nzSize = this.nzSize));
     }
   }
 
+  ngOnInit(): void {
+    this.focusMonitor
+      .monitor(this.elementRef, true)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(focusOrigin => {
+        this.focused = !!focusOrigin;
+        this.cdr.markForCheck();
+      });
+  }
+
   ngAfterContentInit(): void {
     this.updateChildrenInputSize();
+    const listOfInputChange$ = this.listOfNzInputDirective.changes.pipe(startWith(this.listOfNzInputDirective));
+    listOfInputChange$
+      .pipe(
+        switchMap(list => {
+          return merge(...[listOfInputChange$, ...list.map((input: NzInputDirective) => input.disabled$)]);
+        }),
+        flatMap(() => listOfInputChange$),
+        map(list => list.some((input: NzInputDirective) => input.disabled)),
+        takeUntil(this.destroy$)
+      )
+      .subscribe(disabled => {
+        this.disabled = disabled;
+        this.cdr.markForCheck();
+      });
   }
   ngOnChanges(changes: SimpleChanges): void {
     const {
@@ -139,4 +177,8 @@ export class NzInputGroupComponent implements AfterContentInit, OnChanges {
       this.isAddOn = !!(this.nzAddOnAfter || this.nzAddOnBefore || this.nzAddOnAfterIcon || this.nzAddOnBeforeIcon);
     }
   }
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
 }

components/input/input-group.spec.ts

@@ -2,6 +2,7 @@ import { Component, TemplateRef, ViewChild } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
+import { dispatchFakeEvent } from 'ng-zorro-antd/core/testing';
 import { NzIconTestModule } from 'ng-zorro-antd/icon/testing';
 import { NzInputGroupComponent } from './input-group.component';
 import { NzInputModule } from './input.module';
@@ -143,6 +144,22 @@ describe('input-group', () => {
         fixture.detectChanges();
         expect(inputGroupElement.classList).toContain('ant-input-affix-wrapper-sm');
       });
+      it('should disabled work', () => {
+        testComponent.beforeContent = 'before';
+        fixture.detectChanges();
+        expect(inputGroupElement.classList).not.toContain('ant-input-affix-wrapper-disabled');
+        testComponent.disabled = true;
+        fixture.detectChanges();
+        expect(inputGroupElement.classList).toContain('ant-input-affix-wrapper-disabled');
+      });
+      it('should focus work', () => {
+        testComponent.beforeContent = 'before';
+        fixture.detectChanges();
+        expect(inputGroupElement.classList).not.toContain('ant-input-affix-wrapper-focused');
+        dispatchFakeEvent(inputGroupElement.querySelector('input')!, 'focus');
+        fixture.detectChanges();
+        expect(inputGroupElement.classList).toContain('ant-input-affix-wrapper-focused');
+      });
     });
     describe('multiple', () => {
       let fixture: ComponentFixture<NzTestInputGroupMultipleComponent>;
@@ -239,7 +256,7 @@ export class NzTestInputGroupAddonComponent {
 @Component({
   template: `
     <nz-input-group [nzPrefix]="beforeContent" [nzSuffix]="afterContent" [nzSize]="size">
-      <input type="text" nz-input />
+      <input type="text" nz-input [disabled]="disabled" />
     </nz-input-group>
     <ng-template #beforeTemplate>beforeTemplate</ng-template>
     <ng-template #afterTemplate>afterTemplate</ng-template>
@@ -251,6 +268,7 @@ export class NzTestInputGroupAffixComponent {
   beforeContent: string | TemplateRef<void>;
   afterContent: string | TemplateRef<void>;
   size = 'default';
+  disabled = false;
 }
 
 @Component({

components/input/input.directive.ts

@@ -6,9 +6,10 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { Directive, ElementRef, Input, Renderer2 } from '@angular/core';
+import { Directive, ElementRef, Input, OnChanges, Renderer2, SimpleChanges } from '@angular/core';
 import { BooleanInput, NzSizeLDSType } from 'ng-zorro-antd/core/types';
 import { InputBoolean } from 'ng-zorro-antd/core/util';
+import { Subject } from 'rxjs';
 
 @Directive({
   selector: 'input[nz-input],textarea[nz-input]',
@@ -19,13 +20,20 @@ import { InputBoolean } from 'ng-zorro-antd/core/util';
     '[class.ant-input-sm]': `nzSize === 'small'`
   }
 })
-export class NzInputDirective {
+export class NzInputDirective implements OnChanges {
   static ngAcceptInputType_disabled: BooleanInput;
 
   @Input() nzSize: NzSizeLDSType = 'default';
   @Input() @InputBoolean() disabled = false;
+  disabled$ = new Subject<boolean>();
 
   constructor(renderer: Renderer2, elementRef: ElementRef) {
     renderer.addClass(elementRef.nativeElement, 'ant-input');
   }
+  ngOnChanges(changes: SimpleChanges): void {
+    const { disabled } = changes;
+    if (disabled) {
+      this.disabled$.next(this.disabled);
+    }
+  }
 }