Skip to content

Commit f7a12b6

Browse files
crisbetoandrewseguin
authored andcommitted
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.
1 parent d2f41a4 commit f7a12b6

File tree

3 files changed

+12
-2
lines changed

3 files changed

+12
-2
lines changed

src/cdk/a11y/focus-trap.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -145,6 +145,10 @@ export class FocusTrap {
145145
* @returns The boundary element.
146146
*/
147147
private _getRegionBoundary(bound: 'start' | 'end'): HTMLElement | null {
148+
if (!this._platform.isBrowser) {
149+
return null;
150+
}
151+
148152
// Contains the deprecated version of selector, for temporary backwards comparability.
149153
let markers = this._element.querySelectorAll(`[cdk-focus-region-${bound}], ` +
150154
`[cdk-focus-${bound}]`) as NodeListOf<HTMLElement>;
@@ -168,6 +172,10 @@ export class FocusTrap {
168172
* @returns Returns whether focus was moved successfuly.
169173
*/
170174
focusInitialElement(): boolean {
175+
if (!this._platform.isBrowser) {
176+
return false;
177+
}
178+
171179
const redirectToElement = this._element.querySelector('[cdk-focus-initial]') as HTMLElement;
172180

173181
if (redirectToElement) {

src/cdk/a11y/interactivity-checker.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,8 @@ export class InteractivityChecker {
148148
function hasGeometry(element: HTMLElement): boolean {
149149
// Use logic from jQuery to check for an invisible element.
150150
// See https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js#L12
151-
return !!(element.offsetWidth || element.offsetHeight || element.getClientRects().length);
151+
return !!(element.offsetWidth || element.offsetHeight ||
152+
(typeof element.getClientRects === 'function' && element.getClientRects().length));
152153
}
153154

154155
/** Gets whether an element's */

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -173,8 +173,9 @@ <h2>Select</h2>
173173

174174
<h2>Sidenav</h2>
175175
<mat-sidenav-container>
176-
<mat-sidenav>On the side</mat-sidenav>
176+
<mat-sidenav opened>On the side</mat-sidenav>
177177
Main content
178+
<button>Click me</button>
178179
</mat-sidenav-container>
179180

180181
<h2>Slide-toggle</h2>

0 commit comments

Comments
 (0)