Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Jan 4, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions src/cdk/a11y/focus-trap.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,12 @@ import {take} from 'rxjs/operators/take';
import {InteractivityChecker} from './interactivity-checker';
import {DOCUMENT} from '@angular/common';

/**
* Node type of element nodes. Used instead of Node.ELEMENT_NODE
* which is unsupported in Universal.
* @docs-private
*/
const ELEMENT_NODE_TYPE = 1;

/**
* Class that allows for trapping focus within a DOM element.
Expand Down Expand Up @@ -223,7 +229,7 @@ export class FocusTrap {
let children = root.children || root.childNodes;

for (let i = 0; i < children.length; i++) {
let tabbableChild = children[i].nodeType === Node.ELEMENT_NODE ?
let tabbableChild = children[i].nodeType === ELEMENT_NODE_TYPE ?
this._getFirstTabbableElement(children[i] as HTMLElement) :
null;

Expand All @@ -245,7 +251,7 @@ export class FocusTrap {
let children = root.children || root.childNodes;

for (let i = children.length - 1; i >= 0; i--) {
let tabbableChild = children[i].nodeType === Node.ELEMENT_NODE ?
let tabbableChild = children[i].nodeType === ELEMENT_NODE_TYPE ?
this._getLastTabbableElement(children[i] as HTMLElement) :
null;

Expand Down
3 changes: 2 additions & 1 deletion src/lib/icon/icon-registry.ts
Original file line number Diff line number Diff line change
Expand Up @@ -421,7 +421,8 @@ export class MatIconRegistry {
let svg = this._svgElementFromString('<svg></svg>');

for (let i = 0; i < element.childNodes.length; i++) {
if (element.childNodes[i].nodeType === Node.ELEMENT_NODE) {
// Note: 1 corresponds to `Node.ELEMENT_NODE` which we can't use in Universal.
if (element.childNodes[i].nodeType === 1) {
svg.appendChild(element.childNodes[i].cloneNode(true));
}
}
Expand Down
5 changes: 4 additions & 1 deletion src/universal-app/kitchen-sink/kitchen-sink.html
Original file line number Diff line number Diff line change
Expand Up @@ -177,7 +177,10 @@ <h2>Select</h2>

<h2>Sidenav</h2>
<mat-sidenav-container>
<mat-sidenav opened>On the side</mat-sidenav>
<mat-sidenav opened>
On the side
<button>Button for testing focus trapping</button>
</mat-sidenav>
Main content
<button>Click me</button>
</mat-sidenav-container>
Expand Down