diff --git a/source/CellMeasurer/CellMeasurer.jest.js b/source/CellMeasurer/CellMeasurer.jest.js
index b9c6561fc..8fa53c419 100644
--- a/source/CellMeasurer/CellMeasurer.jest.js
+++ b/source/CellMeasurer/CellMeasurer.jest.js
@@ -223,8 +223,10 @@ describe('CellMeasurer', () => {
(params) =>
)
+ let measurer;
const node = findDOMNode(render(
{ measurer = ref }}
cache={cache}
columnIndex={0}
parent={parent}
@@ -235,12 +237,43 @@ describe('CellMeasurer', () => {
))
- node.style.width = 100
- node.style.height = 30
-
- child.mock.calls[0][0].measure()
+ const { height, width } = measurer._getCellMeasures(node)
+ expect(height).toBeGreaterThan(0)
+ expect(width).toBeGreaterThan(0)
expect(node.style.height).toBe('auto')
expect(node.style.width).not.toBe('auto')
})
+
+ // See issue #660
+ it('should set widht/height style to values before measuring with style "auto"', () => {
+ const cache = new CellMeasurerCache({
+ fixedHeight: true
+ })
+ const parent = createParent({ cache })
+ const child = jest.fn()
+ child.mockImplementation(
+ (params) =>
+ )
+
+ const node = findDOMNode(render(
+
+ {child}
+
+ ))
+
+ node.style.width = 200
+ node.style.height = 60
+
+ child.mock.calls[0][0].measure()
+
+ expect(node.style.height).toBe('30px')
+ expect(node.style.width).toBe('100px')
+ })
})
diff --git a/source/CellMeasurer/CellMeasurer.js b/source/CellMeasurer/CellMeasurer.js
index b031e463e..9bdce94d7 100644
--- a/source/CellMeasurer/CellMeasurer.js
+++ b/source/CellMeasurer/CellMeasurer.js
@@ -41,6 +41,22 @@ export default class CellMeasurer extends PureComponent {
: children
}
+ _getCellMeasures (node) {
+ const { cache } = this.props
+
+ if (!cache.hasFixedWidth()) {
+ node.style.width = 'auto'
+ }
+ if (!cache.hasFixedHeight()) {
+ node.style.height = 'auto'
+ }
+
+ const height = Math.ceil(node.offsetHeight)
+ const width = Math.ceil(node.offsetWidth)
+
+ return { height, width };
+ }
+
_maybeMeasureCell () {
const {
cache,
@@ -51,6 +67,8 @@ export default class CellMeasurer extends PureComponent {
if (!cache.has(rowIndex, columnIndex)) {
const node = findDOMNode(this)
+ const oldWidth = node.style.width
+ const oldHeight = node.style.height
// TODO Check for a bad combination of fixedWidth and missing numeric width or vice versa with height
@@ -58,16 +76,15 @@ export default class CellMeasurer extends PureComponent {
// Explicitly clear width/height before measuring to avoid being tainted by another Grid.
// eg top/left Grid renders before bottom/right Grid
// Since the CellMeasurerCache is shared between them this taints derived cell size values.
- if (!cache.hasFixedWidth()) {
- node.style.width = 'auto'
+ const { height, width } = this._getCellMeasures(node);
+
+ if (oldWidth) {
+ node.style.width = oldWidth
}
- if (!cache.hasFixedHeight()) {
- node.style.height = 'auto'
+ if (oldHeight) {
+ node.style.height = oldHeight
}
- const height = Math.ceil(node.offsetHeight)
- const width = Math.ceil(node.offsetWidth)
-
cache.set(
rowIndex,
columnIndex,
@@ -97,22 +114,23 @@ export default class CellMeasurer extends PureComponent {
} = this.props
const node = findDOMNode(this)
+ const oldWidth = node.style.width
+ const oldHeight = node.style.height
// If we are re-measuring a cell that has already been measured,
// It will have a hard-coded width/height from the previous measurement.
// The fact that we are measuring indicates this measurement is probably stale,
// So explicitly clear it out (eg set to "auto") so we can recalculate.
// See issue #593 for more info.
- if (!cache.hasFixedWidth()) {
- node.style.width = 'auto'
+ const { height, width } = this._getCellMeasures(node)
+
+ if (oldWidth) {
+ node.style.width = oldWidth
}
- if (!cache.hasFixedHeight()) {
- node.style.height = 'auto'
+ if (oldHeight) {
+ node.style.height = oldHeight
}
- const height = Math.ceil(node.offsetHeight)
- const width = Math.ceil(node.offsetWidth)
-
if (
height !== cache.getHeight(rowIndex, columnIndex) ||
width !== cache.getWidth(rowIndex, columnIndex)