From 5c667b02ddb2686a5d43ff4f9f0d7dc4724ab065 Mon Sep 17 00:00:00 2001
From: Conor Wright <conor.wright@blackbaud.com>
Date: Wed, 28 Nov 2018 13:44:30 -0500
Subject: [PATCH] Fixed modal component to ignore hidden elements when
 initially assigning focus. (#12)

---
 .../modal-with-focus-content.fixture.html     | 20 +++++++++++++++++--
 .../modal/modal-component-adapter.service.ts  | 13 ++++++++++--
 .../modules/modal/modal.component.spec.ts     |  2 +-
 3 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/src/app/public/modules/modal/fixtures/modal-with-focus-content.fixture.html b/src/app/public/modules/modal/fixtures/modal-with-focus-content.fixture.html
index 3a198c9..2cb701a 100644
--- a/src/app/public/modules/modal/fixtures/modal-with-focus-content.fixture.html
+++ b/src/app/public/modules/modal/fixtures/modal-with-focus-content.fixture.html
@@ -1,6 +1,22 @@
 <sky-modal>
-  <sky-modal-header>Test</sky-modal-header>
+  <sky-modal-header>
+    Test
+  </sky-modal-header>
   <sky-modal-content>
-    <button>Content</button>
+    <button
+      style="visibility: hidden;"
+    >
+      Hidden
+    </button>
+    <button
+      style="display: none;"
+    >
+      No display
+    </button>
+    <button
+      id="visible-btn"
+    >
+      Content
+    </button>
   </sky-modal-content>
 </sky-modal>
diff --git a/src/app/public/modules/modal/modal-component-adapter.service.ts b/src/app/public/modules/modal/modal-component-adapter.service.ts
index 28afadd..1a1f526 100644
--- a/src/app/public/modules/modal/modal-component-adapter.service.ts
+++ b/src/app/public/modules/modal/modal-component-adapter.service.ts
@@ -113,8 +113,17 @@ export class SkyModalComponentAdapterService {
   }
 
   private isVisible(element: HTMLElement) {
-    return !!(element.offsetWidth ||
+    const style = window.getComputedStyle(element);
+    const isHidden = style.display === 'none' || style.visibility === 'hidden';
+    if (isHidden) {
+      return false;
+    }
+
+    const hasBounds = !!(
+      element.offsetWidth ||
       element.offsetHeight ||
-      element.getClientRects().length);
+      element.getClientRects().length
+    );
+    return hasBounds;
   }
 }
diff --git a/src/app/public/modules/modal/modal.component.spec.ts b/src/app/public/modules/modal/modal.component.spec.ts
index 0456114..f350d59 100644
--- a/src/app/public/modules/modal/modal.component.spec.ts
+++ b/src/app/public/modules/modal/modal.component.spec.ts
@@ -113,7 +113,7 @@ describe('Modal component', () => {
 
   it('should focus the first focusable element when no autofocus is inside of content', fakeAsync(() => {
     let modalInstance1 = openModal(ModalWithFocusContentTestComponent);
-    expect(document.activeElement).toEqual(document.querySelector('.sky-modal-content button'));
+    expect(document.activeElement).toEqual(document.querySelector('#visible-btn'));
     closeModal(modalInstance1);
   }));