Fixed modal component to ignore hidden elements when initially assign…

…ing focus. (#12)

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>

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;
   }
 }

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);
   }));