diff --git a/packages/chips/Chip.tsx b/packages/chips/Chip.tsx index 1d6bf4378..e1efffb7f 100644 --- a/packages/chips/Chip.tsx +++ b/packages/chips/Chip.tsx @@ -134,12 +134,38 @@ export class Chip extends React.Component { .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 index 6fe0b2031..164e8efbd 100644 --- a/packages/tab-indicator/index.tsx +++ b/packages/tab-indicator/index.tsx @@ -132,7 +132,20 @@ export default class TabIndicator extends React.Component 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 index c623bc15b..603748878 100644 --- 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(); };