fix(Button): Set the native disabled attribute (#1621)

fix(Button): Set the native disabled attribute as well as preventing events
bullhorn · Oct 18, 2024 · d0e55bd · d0e55bd
1 parent 82485bb
commit d0e55bd
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 4 deletions.
diff --git a/projects/novo-elements/src/elements/button/Button.spec.ts b/projects/novo-elements/src/elements/button/Button.spec.ts
@@ -1,10 +1,12 @@
 // NG2
-import { TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
 // APP
 import { NovoButtonElement } from './Button';
+import { Component, Input } from '@angular/core';
 
 describe('Elements: NovoButtonElement', () => {
-  let fixture;
+  let fixture: ComponentFixture<NovoButtonElement>;
   let component;
 
   beforeAll(() => {
@@ -21,4 +23,46 @@ describe('Elements: NovoButtonElement', () => {
   it('should be compiled', () => {
     expect(component).toBeDefined();
   });
+
+  it('should not assign disabled attribute to self when registered as <novo-button>', () => {
+    fixture.componentRef.setInput('disabled', true);
+    fixture.detectChanges();
+    expect(fixture.debugElement.nativeElement.getAttribute('disabled')).toBe(null);
+  });
 });
+
+@Component({
+  template: '<button theme="dialogue" [disabled]="disableButton"></button>',
+  selector: 'test-button-component',
+})
+class TestButtonContainer {
+  @Input() disableButton = false;
+}
+
+describe('<button> with NovoButtonElement directive', () => {
+  let fixture: ComponentFixture<TestButtonContainer>;
+  let component;
+
+  beforeAll(() => {
+    TestBed.configureTestingModule({
+      declarations: [NovoButtonElement, TestButtonContainer],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TestButtonContainer);
+    component = fixture.componentInstance;
+  });
+
+  it('should be compiled', () => {
+    fixture.detectChanges();
+    expect(component).toBeDefined();
+    expect(fixture.debugElement.query(By.directive(NovoButtonElement))).toBeTruthy();
+  });
+
+  it('should disable the element when the disabled property is specified', () => {
+    fixture.componentRef.setInput('disableButton', true);
+    fixture.detectChanges();
+    expect(fixture.debugElement.query(By.css('button')).nativeElement.disabled).toBe(true);
+  });
+});
diff --git a/projects/novo-elements/src/elements/button/Button.ts b/projects/novo-elements/src/elements/button/Button.ts
@@ -1,5 +1,5 @@
 // NG2
-import { ChangeDetectionStrategy, Component, ElementRef, HostBinding, HostListener, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, HostBinding, HostListener, Input, OnChanges, SimpleChanges } from '@angular/core';
 import { BooleanInput, Helpers, Key } from 'novo-elements/utils';
 
 @Component({
@@ -63,7 +63,7 @@ import { BooleanInput, Helpers, Key } from 'novo-elements/utils';
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class NovoButtonElement {
+export class NovoButtonElement implements OnChanges {
   /**
    * The text color of the button. Should be used for Icon buttons. see theme.
    */
@@ -107,10 +107,19 @@ export class NovoButtonElement {
   @HostBinding('class.novo-button-disabled')
   disabled: boolean = false;
 
+  @HostBinding('attr.disabled')
+  disabledAttr: undefined | '' = undefined;
+
   private _icon: string;
 
   constructor(public element: ElementRef) {}
 
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.disabled && this.element.nativeElement.tagName === 'BUTTON') {
+      this.disabledAttr = changes.disabled.currentValue ? '' : undefined;
+    }
+  }
+
   @HostListener('keydown', ['$event'])
   handleKeydown(event: KeyboardEvent) {
     if ((Key.Enter === event.key || Key.Space === event.key) && (this.disabled || this.loading)) {