fix(tabs): server-side rendering error when aligning ink bar (#5455)

* Fixes a server-side rendering error in the ink bar due to a lack of `requestAnimationFrame`. The error is being logged, but it didn't fail the build, because it happens in a lifecycle hook. * Enables the checkbox and button toggle cases in the kitchen sink since it looks like they're not failing anymore.
angular · Jul 6, 2017 · 448db8b · 448db8b
1 parent 8de3b98
commit 448db8b
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 37 deletions.
diff --git a/src/lib/tabs/ink-bar.ts b/src/lib/tabs/ink-bar.ts
@@ -33,14 +33,13 @@ export class MdInkBar {
   alignToElement(element: HTMLElement) {
     this.show();
 
-    this._ngZone.runOutsideAngular(() => {
-      requestAnimationFrame(() => {
-        this._renderer.setStyle(this._elementRef.nativeElement, 'left',
-            this._getLeftPosition(element));
-        this._renderer.setStyle(this._elementRef.nativeElement, 'width',
-            this._getElementWidth(element));
+    if (typeof requestAnimationFrame !== 'undefined') {
+      this._ngZone.runOutsideAngular(() => {
+        requestAnimationFrame(() => this._setStyles(element));
       });
-    });
+    } else {
+      this._setStyles(element);
+    }
   }
 
   /** Shows the ink bar. */
@@ -54,18 +53,14 @@ export class MdInkBar {
   }
 
   /**
-   * Generates the pixel distance from the left based on the provided element in string format.
+   * Sets the proper styles to the ink bar element.
    * @param element
    */
-  private _getLeftPosition(element: HTMLElement): string {
-    return element ? element.offsetLeft + 'px' : '0';
-  }
+  private _setStyles(element: HTMLElement) {
+    const left = element ? (element.offsetLeft || 0) + 'px' : '0';
+    const width = element ? (element.offsetWidth || 0) + 'px' : '0';
 
-  /**
-   * Generates the pixel width from the provided element in string format.
-   * @param element
-   */
-  private _getElementWidth(element: HTMLElement): string {
-    return element ? element.offsetWidth + 'px' : '0';
+    this._renderer.setStyle(this._elementRef.nativeElement, 'left', left);
+    this._renderer.setStyle(this._elementRef.nativeElement, 'width', width);
   }
 }
diff --git a/src/universal-app/kitchen-sink/kitchen-sink.html b/src/universal-app/kitchen-sink/kitchen-sink.html
@@ -21,22 +21,21 @@ <h2>Button</h2>
 <a md-fab href="https://google.com">Google</a>
 <a md-mini-fab href="https://google.com">Google</a>
 
-<!-- Button toggle doesn't work due to https://github.com/angular/angular/issues/17050 -->
-<!--<h2>Button toggle</h2>-->
-
-<!--<h3>Single selection</h3>-->
-<!--<md-button-toggle-group>-->
-  <!--<md-button-toggle>Ketchup</md-button-toggle>-->
-  <!--<md-button-toggle>Mustard</md-button-toggle>-->
-  <!--<md-button-toggle>Mayo</md-button-toggle>-->
-<!--</md-button-toggle-group>-->
-
-<!--<h3>Multi selection</h3>-->
-<!--<md-button-toggle-group multiple>-->
-  <!--<md-button-toggle>Ketchup</md-button-toggle>-->
-  <!--<md-button-toggle>Mustard</md-button-toggle>-->
-  <!--<md-button-toggle>Mayo</md-button-toggle>-->
-<!--</md-button-toggle-group>-->
+<h2>Button toggle</h2>
+
+<h3>Single selection</h3>
+<md-button-toggle-group>
+  <md-button-toggle>Ketchup</md-button-toggle>
+  <md-button-toggle>Mustard</md-button-toggle>
+  <md-button-toggle>Mayo</md-button-toggle>
+</md-button-toggle-group>
+
+<h3>Multi selection</h3>
+<md-button-toggle-group multiple>
+  <md-button-toggle>Ketchup</md-button-toggle>
+  <md-button-toggle>Mustard</md-button-toggle>
+  <md-button-toggle>Mayo</md-button-toggle>
+</md-button-toggle-group>
 
 <h3>Standalone</h3>
 <md-button-toggle>Hyperspinner enabled</md-button-toggle>
@@ -63,11 +62,10 @@ <h3>Card</h3>
   </md-card-footer>
 </md-card>
 
-<!-- Checkbox doesn't work due to https://github.com/angular/angular/issues/17050 -->
-<!--<h2>Checkbox</h2>-->
+<h2>Checkbox</h2>
 
-<!--<md-checkbox>With a label</md-checkbox>-->
-<!--<md-checkbox></md-checkbox>Without a label-->
+<md-checkbox>With a label</md-checkbox>
+<md-checkbox></md-checkbox>Without a label
 
 <h2>Chips</h2>