fix(module:button): disabled not work with anchor (#5233)

close #5226
NG-ZORRO · May 11, 2020 · 36ab993 · 36ab993
1 parent c2b68dd
commit 36ab993
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 3 deletions.
diff --git a/components/button/button.component.ts b/components/button/button.component.ts
@@ -59,7 +59,10 @@ const NZ_CONFIG_COMPONENT_NAME = 'button';
     '[class.ant-btn-loading]': `nzLoading`,
     '[class.ant-btn-background-ghost]': `nzGhost`,
     '[class.ant-btn-block]': `nzBlock`,
-    '[class.ant-input-search-button]': `nzSearch`
+    '[class.ant-input-search-button]': `nzSearch`,
+    '[attr.tabindex]': 'disabled ? -1 : (tabIndex === null ? null : tabIndex)',
+    '[attr.disabled]': 'disabled || null',
+    '(click)': 'haltDisabledEvents($event)'
   }
 })
 export class NzButtonComponent implements OnDestroy, OnChanges, AfterViewInit, AfterContentInit {
@@ -68,19 +71,29 @@ export class NzButtonComponent implements OnDestroy, OnChanges, AfterViewInit, A
   static ngAcceptInputType_nzSearch: BooleanInput;
   static ngAcceptInputType_nzLoading: BooleanInput;
   static ngAcceptInputType_nzDanger: BooleanInput;
+  static ngAcceptInputType_disabled: BooleanInput;
 
   @ContentChild(NzIconDirective, { read: ElementRef }) nzIconDirectiveElement!: ElementRef;
   @Input() @InputBoolean() nzBlock: boolean = false;
   @Input() @InputBoolean() nzGhost: boolean = false;
   @Input() @InputBoolean() nzSearch: boolean = false;
   @Input() @InputBoolean() nzLoading: boolean = false;
   @Input() @InputBoolean() nzDanger: boolean = false;
+  @Input() @InputBoolean() disabled: boolean = false;
+  @Input() tabIndex: number | string | null = null;
   @Input() nzType: NzButtonType = null;
   @Input() nzShape: NzButtonShape = null;
   @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME) nzSize: NzButtonSize = 'default';
   private destroy$ = new Subject<void>();
   private loading$ = new Subject<boolean>();
 
+  haltDisabledEvents(event: Event): void {
+    if (this.disabled) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  }
+
   insertSpan(nodes: NodeList, renderer: Renderer2): void {
     nodes.forEach(node => {
       if (node.nodeName === '#text') {

diff --git a/components/button/button.spec.ts b/components/button/button.spec.ts
@@ -3,16 +3,44 @@ import { fakeAsync, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { ɵComponentBed as ComponentBed, ɵcreateComponentBed as createComponentBed } from 'ng-zorro-antd/core/testing';
 import { NzIconTestModule } from 'ng-zorro-antd/icon/testing';
-import { NzButtonComponent, NzButtonShape, NzButtonSize, NzButtonType } from './index';
+import { NzButtonComponent, NzButtonModule, NzButtonShape, NzButtonSize, NzButtonType } from './index';
 
 describe('button', () => {
+  describe('anchor', () => {
+    let testBed: ComponentBed<TestAnchorButtonComponent>;
+    let buttonElement: HTMLAnchorElement;
+
+    beforeEach(() => {
+      testBed = createComponentBed(TestAnchorButtonComponent, { imports: [NzButtonModule] });
+      buttonElement = testBed.debugElement.query(By.css('a')).nativeElement;
+    });
+
+    it('should disabled work', () => {
+      testBed.component.disabled = false;
+      testBed.fixture.detectChanges();
+
+      expect(buttonElement.getAttribute('disabled')).toBeNull();
+
+      testBed.component.disabled = true;
+      testBed.fixture.detectChanges();
+
+      expect(buttonElement.getAttribute('disabled')).not.toBeNull();
+      expect(buttonElement.getAttribute('tabindex')).toBe('-1');
+
+      // If the page reloads will be thrown an error
+      expect(() => {
+        buttonElement.click();
+      }).not.toThrowError();
+    });
+  });
   describe('className', () => {
     let testBed: ComponentBed<TestButtonComponent>;
     let buttonElement: HTMLButtonElement;
     beforeEach(() => {
       testBed = createComponentBed(TestButtonComponent, { declarations: [NzButtonComponent] });
       buttonElement = testBed.debugElement.query(By.directive(NzButtonComponent)).nativeElement;
     });
+
     it('should apply classname', () => {
       expect(buttonElement.className).toBe('ant-btn');
     });
@@ -192,3 +220,10 @@ export class TestButtonWithIconComponent implements OnInit {
   `
 })
 export class TestButtonIconOnlyComponent {}
+
+@Component({
+  template: ` <a nz-button href="https://ng.ant.design/" [disabled]="disabled">anchor</a> `
+})
+export class TestAnchorButtonComponent {
+  disabled = false;
+}
diff --git a/components/core/wave/nz-wave.directive.ts b/components/core/wave/nz-wave.directive.ts
@@ -28,7 +28,7 @@ export function NZ_WAVE_GLOBAL_CONFIG_FACTORY(): NzWaveConfig {
 }
 
 @Directive({
-  selector: '[nz-wave],button[nz-button]',
+  selector: '[nz-wave],button[nz-button]:not([nzType="link"])',
   exportAs: 'nzWave'
 })
 export class NzWaveDirective implements OnInit, OnDestroy {