diff --git a/components/button/button.component.ts b/components/button/button.component.ts index b764299f09c..f2e86244ff0 100644 --- 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,6 +71,7 @@ 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; @@ -75,12 +79,21 @@ export class NzButtonComponent implements OnDestroy, OnChanges, AfterViewInit, A @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(); private loading$ = new Subject(); + 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 index d15fedd8663..f0c70cf742d 100644 --- a/components/button/button.spec.ts +++ b/components/button/button.spec.ts @@ -3,9 +3,36 @@ 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; + 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; let buttonElement: HTMLButtonElement; @@ -13,6 +40,7 @@ describe('button', () => { 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: ` anchor ` +}) +export class TestAnchorButtonComponent { + disabled = false; +} diff --git a/components/core/wave/nz-wave.directive.ts b/components/core/wave/nz-wave.directive.ts index fe484c4eaba..eb9f01d6dbb 100644 --- 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 {