fix(Button): Set the native disabled attribute as well as preventing …

…events
bullhorn · Oct 17, 2024 · ed70fb0 · ed70fb0
1 parent 2c6d559
commit ed70fb0
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 7 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)) {

diff --git a/projects/novo-examples/src/components/buttons/button-secondary/button-secondary-example.html b/projects/novo-examples/src/components/buttons/button-secondary/button-secondary-example.html
@@ -1,7 +1,7 @@
 <section>
   <div class="example-label">Default</div>
   <div class="example-button-row">
-    <button theme="secondary">Secondary</button>
+    <button [disabled]="disabledParam" theme="secondary">Secondary</button>
     <button theme="secondary" disabled>Secondary</button>
   </div>
 </section>
@@ -11,7 +11,7 @@
 <section>
   <div class="example-label">Small</div>
   <div class="example-button-row">
-    <button theme="secondary" size="small">Secondary</button>
+    <button theme="secondary" size="small">Secondry</button>
     <button theme="secondary" size="small" disabled>Secondary</button>
   </div>
 </section>

diff --git a/projects/novo-examples/src/components/buttons/button-secondary/button-secondary-example.ts b/projects/novo-examples/src/components/buttons/button-secondary/button-secondary-example.ts
@@ -8,4 +8,6 @@ import { Component } from '@angular/core';
   templateUrl: 'button-secondary-example.html',
   styleUrls: ['button-secondary-example.css'],
 })
-export class ButtonSecondaryExample {}
+export class ButtonSecondaryExample {
+  disabledParam = true;
+}