Skip to content

Commit

Permalink
fix(focus-trap): server-side rendering error (#7635)
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
crisbeto authored and andrewseguin committed Oct 9, 2017
1 parent d2f41a4 commit f7a12b6
Show file tree
Hide file tree
Showing 3 changed files with 12 additions and 2 deletions.
8 changes: 8 additions & 0 deletions src/cdk/a11y/focus-trap.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
Expand All @@ -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) {
Expand Down
3 changes: 2 additions & 1 deletion src/cdk/a11y/interactivity-checker.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down
3 changes: 2 additions & 1 deletion src/universal-app/kitchen-sink/kitchen-sink.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit f7a12b6

Please sign in to comment.