fix(focus-trap): server-side rendering error (#7635)

Fixes a couple of errors in the focus trap during server-side rendering. They manifested when there's a sidenav that is open by default.

Fixes #7633.

Author: crisbeto

src/cdk/a11y/focus-trap.ts

@@ -145,6 +145,10 @@ export class FocusTrap {
    * @returns The boundary element.
    */
   private _getRegionBoundary(bound: 'start' | 'end'): HTMLElement | null {
+    if (!this._platform.isBrowser) {
+      return null;
+    }
+
     // Contains the deprecated version of selector, for temporary backwards comparability.
     let markers = this._element.querySelectorAll(`[cdk-focus-region-${bound}], ` +
                                                  `[cdk-focus-${bound}]`) as NodeListOf<HTMLElement>;
@@ -168,6 +172,10 @@ export class FocusTrap {
    * @returns Returns whether focus was moved successfuly.
    */
   focusInitialElement(): boolean {
+    if (!this._platform.isBrowser) {
+      return false;
+    }
+
     const redirectToElement = this._element.querySelector('[cdk-focus-initial]') as HTMLElement;
 
     if (redirectToElement) {

src/cdk/a11y/interactivity-checker.ts

@@ -148,7 +148,8 @@ export class InteractivityChecker {
 function hasGeometry(element: HTMLElement): boolean {
   // Use logic from jQuery to check for an invisible element.
   // See https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js#L12
-  return !!(element.offsetWidth || element.offsetHeight || element.getClientRects().length);
+  return !!(element.offsetWidth || element.offsetHeight ||
+      (typeof element.getClientRects === 'function' && element.getClientRects().length));
 }
 
 /** Gets whether an element's  */

src/universal-app/kitchen-sink/kitchen-sink.html

@@ -173,8 +173,9 @@ <h2>Select</h2>
 
 <h2>Sidenav</h2>
 <mat-sidenav-container>
-  <mat-sidenav>On the side</mat-sidenav>
+  <mat-sidenav opened>On the side</mat-sidenav>
   Main content
+  <button>Click me</button>
 </mat-sidenav-container>
 
 <h2>Slide-toggle</h2>