From c883820d5ed062bd8d0cf00178dd50ea6995b031 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Andre=CC=81=20Rivet?= Date: Thu, 23 Jul 2020 15:12:59 -0400 Subject: [PATCH 1/2] - use the table itself to add the test element - only test for scrollbar once --- src/core/browser/scrollbarWidth.ts | 6 +++--- src/dash-table/components/ControlledTable/index.tsx | 9 ++++----- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/src/core/browser/scrollbarWidth.ts b/src/core/browser/scrollbarWidth.ts index 9390aef54..8de208597 100644 --- a/src/core/browser/scrollbarWidth.ts +++ b/src/core/browser/scrollbarWidth.ts @@ -1,4 +1,4 @@ -export default (): Promise => { +export default (target: HTMLElement): Promise => { const parent = document.createElement('div'); parent.style.position = 'absolute'; parent.style.visibility = 'hidden'; @@ -11,13 +11,13 @@ export default (): Promise => { child.style.height = '100px'; parent.appendChild(child); - document.body.appendChild(parent); + target.appendChild(parent); return new Promise(resolve => { setTimeout(() => { const width = child.clientWidth - parent.clientWidth; - document.body.removeChild(parent); + target.removeChild(parent); resolve(width); }, 0); }); diff --git a/src/dash-table/components/ControlledTable/index.tsx b/src/dash-table/components/ControlledTable/index.tsx index 2c950a175..57d168646 100644 --- a/src/dash-table/components/ControlledTable/index.tsx +++ b/src/dash-table/components/ControlledTable/index.tsx @@ -308,6 +308,8 @@ export default class ControlledTable extends PureComponent forceHandleResize = () => this.handleResize(); + getScrollbarWidthOnce = R.once(getScrollbarWidth); + handleResizeIf = memoizeOne((..._: any[]) => { const { r0c0, r0c1, r1c0, r1c1 } = this.refs as Refs; @@ -339,15 +341,13 @@ export default class ControlledTable extends PureComponent setState } = this.props; - const { r1c1 } = this.refs as Refs; + const { r1, r1c1 } = this.refs as Refs; if (!this.isDisplayed(r1c1)) { return; } - this.updateStylesheet(); - - getScrollbarWidth().then((scrollbarWidth: number) => setState({ scrollbarWidth })); + this.getScrollbarWidthOnce(r1).then((scrollbarWidth: number) => setState({ scrollbarWidth })); const { r0c0, r0c1, r1c0 } = this.refs as Refs; @@ -395,7 +395,6 @@ export default class ControlledTable extends PureComponent const firstTdBounds = firstVisibleTd.getBoundingClientRect(); const width = firstTdBounds.left - r1c1FragmentBounds.left; - const { r1 } = this.refs as Refs; r0c1.style.marginLeft = `-${width + r1.scrollLeft}px`; r1c1.style.marginLeft = `-${width}px`; From 7b00ddc61eaf24f2675dab84c7d4592b7cdccca4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Andre=CC=81=20Rivet?= Date: Thu, 23 Jul 2020 15:41:41 -0400 Subject: [PATCH 2/2] changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3e28e8ef4..ac1146961 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ This project adheres to [Semantic Versioning](http://semver.org/). ## [Unreleased] ### Fixed - [#806](https://github.com/plotly/dash-table/pull/806) Fix a bug where fixed rows a misaligned after navigating or editing cells [#803](https://github.com/plotly/dash-table/issues/803) +- [#809](https://github.com/plotly/dash-table/pull/809) Fix a bug where a scrollbar flickers on table render [#801](https://github.com/plotly/dash-table/issues/801) ## [4.8.1] - 2020-06-19 ### Fixed