From fb5d0e1ffc79606eefddae550b9b1044f4ccc63b Mon Sep 17 00:00:00 2001 From: Robin Larson Date: Wed, 2 Aug 2017 12:11:37 -0400 Subject: [PATCH] requestAnimationFrame will only trigger if the browser window is visible. If the browser tab is put to the background, requestAnimationFrame will trigger when the tab returned to the foreground. When the Tabs Component is removed from the DOM when in the background, the requestAnimationFrame must be canceled to prevent attempting to use a unmounted Component. (#1604) --- components/tabs/Tabs.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/tabs/Tabs.js b/components/tabs/Tabs.js index 81c73458..53341ccd 100644 --- a/components/tabs/Tabs.js +++ b/components/tabs/Tabs.js @@ -64,6 +64,7 @@ const factory = (Tab, TabContent, FontIcon) => { componentWillUnmount() { window.removeEventListener('resize', this.handleResize); clearTimeout(this.resizeTimeout); + if (this.updatePointerAnimationFrame) cancelAnimationFrame(this.updatePointerAnimationFrame); } handleHeaderClick = (idx) => { @@ -82,7 +83,7 @@ const factory = (Tab, TabContent, FontIcon) => { updatePointer = (idx) => { if (this.navigationNode && this.navigationNode.children[idx]) { - requestAnimationFrame(() => { + this.updatePointerAnimationFrame = requestAnimationFrame(() => { const nav = this.navigationNode.getBoundingClientRect(); const label = this.navigationNode.children[idx].getBoundingClientRect(); const scrollLeft = this.navigationNode.scrollLeft;