From 8e79086a284531beffe1f14d90ec3054f8a1b13f Mon Sep 17 00:00:00 2001
From: David Keyworth <david.keyworth@bullhorn.com>
Date: Thu, 17 Oct 2024 14:52:07 -0400
Subject: [PATCH] fix(Button): Set the native disabled attribute as well as
 preventing events

---
 .../src/elements/button/Button.spec.ts        | 48 ++++++++++++++++++-
 .../src/elements/button/Button.ts             | 13 ++++-
 2 files changed, 57 insertions(+), 4 deletions(-)

diff --git a/projects/novo-elements/src/elements/button/Button.spec.ts b/projects/novo-elements/src/elements/button/Button.spec.ts
index 639be56d1..43c6d09ed 100644
--- 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);
+  });
+});
\ No newline at end of file
diff --git a/projects/novo-elements/src/elements/button/Button.ts b/projects/novo-elements/src/elements/button/Button.ts
index d7790de77..016d51d36 100644
--- 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)) {