fix(chips): ClientRect/DOMRect is not IE11 compatible (#855)

material-components · May 30, 2019 · 88697da · 88697da
1 parent ac7e184
commit 88697da
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 11 deletions.
diff --git a/packages/chips/Chip.tsx b/packages/chips/Chip.tsx
@@ -134,12 +134,38 @@ export class Chip extends React.Component<ChipProps, ChipState> {
           .getPropertyValue(propertyName);
       },
       getRootBoundingClientRect: () => {
-        if (!this.chipElement) return new ClientRect();
+        if (!this.chipElement) {
+          // new DOMRect is not IE11 compatible
+          const defaultDOMRect = {
+            bottom: 0,
+            height: 0,
+            left: 0,
+            right: 0,
+            top: 0,
+            width: 0,
+            x: 0,
+            y: 0,
+          };
+          return defaultDOMRect;
+        }
         return this.chipElement.getBoundingClientRect();
       },
       getCheckmarkBoundingClientRect: () => {
         const {chipCheckmark} = this.props;
-        if (!chipCheckmark) return new ClientRect();
+        if (!(chipCheckmark && chipCheckmark.props && chipCheckmark.props.getBoundingClientRect)) {
+          // new DOMRect is not IE11 compatible
+          const defaultDOMRect = {
+            bottom: 0,
+            height: 0,
+            left: 0,
+            right: 0,
+            top: 0,
+            width: 0,
+            x: 0,
+            y: 0,
+          };
+          return defaultDOMRect;
+        }
         return chipCheckmark.props.getBoundingClientRect();
       },
       setStyleProperty: (propertyName: keyof React.CSSProperties, value: string | null) => {

diff --git a/packages/tab-indicator/index.tsx b/packages/tab-indicator/index.tsx
@@ -132,7 +132,20 @@ export default class TabIndicator extends React.Component<TabIndicatorProps, {}>
 
   computeContentClientRect = () => {
     const contentElement = this.getNativeContentElement();
-    if (!(contentElement && contentElement.getBoundingClientRect)) return new ClientRect();
+    if (!(contentElement && contentElement.getBoundingClientRect)) {
+      // new DOMRect is not IE11 compatible
+      const defaultDOMRect = {
+        bottom: 0,
+        height: 0,
+        left: 0,
+        right: 0,
+        top: 0,
+        width: 0,
+        x: 0,
+        y: 0,
+      };
+      return defaultDOMRect;
+    }
     return contentElement.getBoundingClientRect();
   };
 

diff --git a/packages/tab-scroller/index.tsx b/packages/tab-scroller/index.tsx
@@ -151,19 +151,35 @@ export default class TabScroller extends React.Component<
       getScrollContentOffsetWidth: this.getScrollContentWidth,
       getScrollAreaOffsetWidth: () =>
         this.areaElement.current ? this.areaElement.current.offsetWidth : 0,
-      computeScrollAreaClientRect: () =>
-        this.areaElement.current ?
-          this.areaElement.current.getBoundingClientRect() :
-          new ClientRect(),
-      computeScrollContentClientRect: () =>
-        this.contentElement.current ?
-          this.contentElement.current.getBoundingClientRect() :
-          new ClientRect(),
+      computeScrollAreaClientRect: () => {
+        return this.getBoundingClientRectOf(this.contentElement.current);
+      },
+      computeScrollContentClientRect: () => {
+        return this.getBoundingClientRectOf(this.contentElement.current);
+      },
       computeHorizontalScrollbarHeight: () =>
         computeHorizontalScrollbarHeight(document),
     };
   }
 
+  getBoundingClientRectOf = (element: HTMLElement | null) => {
+    if (!element) {
+      // new DOMRect is not IE11 compatible
+      const defaultDOMRect = {
+        bottom: 0,
+        height: 0,
+        left: 0,
+        right: 0,
+        top: 0,
+        width: 0,
+        x: 0,
+        y: 0,
+      };
+      return defaultDOMRect;
+    }
+    return element.getBoundingClientRect();
+  }
+
   getScrollPosition = () => {
     return this.foundation.getScrollPosition();
   };