React-data-grid: Chrome v70 breaks horizontal scrolling (reproducible in adazzle demo grids)

[milesrichardson]

Which version of React JS are you using?

☣️ Not officially supported, expect warnings and errors ☣️
- [X] v16.x.x

---

Which browser are you using?

✅ Officially supported ✅

- [X] Chrome

I'm submitting a ...

• [X] 🐛 Bug Report

---

Issue Details

- What the current behavior is

In Chrome v69 and below, when there are more columns than possible to display on the screen, it is possible to scroll horizontally to see more columns.

- What the desired behavior is

Horizontal scrolling should work.

- (If Bug) Steps to reproduce the issue

1. Download Chrome v70 (released today, Oct 16) or use Chrome Canary v72, as the issue is present in both.

2. Load the demo page at http://adazzle.github.io/react-data-grid/#/examples/immutable-data-grouping

3. Try to scroll horizontally. It does not work.

[milesrichardson]

More details. Although you cannot scroll via the mouse, you can use the arrow keys to page between cells. However, the cells that were beyond the page do not load. Here is what it looks like:

[milesrichardson]

Interestingly, I am unable to replicate this when pulling from master, running webpack-dev-server, and opening in chrome canary. Either the issue was fixed between the last release in master, or something about the iframe in webpack-dev-server causes the bug not to trigger

[galleyrob]

Hi this also happening to my react data grid in chrome version 70 - your examples also do this.

Do you have a fix for this ?

[MikhailSemichev]

The same on our side after Chrome 70 update =(

[yosbelms]

Same issue after chrome 70 update

[lord-xeon]

@milesrichardson I pulled master, built the project and manually replaced dist/react-data-grid.js under node_modules of my project. Things kind of work - the grid will horizontally scroll, but with locked columns, everything is laggy.

[yosbelms]

Hey guys, the thing is that Row style uses an experimental css inline property contain: layout by removing this property it will work as expected. You can try by changing inline css in the browser developer tools.
The workaround I'm using is to create a custom RowRenderer using a custom Row.

import { Row } from 'react-data-grid'
import React from 'react'

class CustomRow extends Row {
  render(...args) {
    const superElement = Row.prototype.render.apply(this, args)
    const style = {
      height: this.getRowHeight(this.props),
      overflow: 'hidden'
    }
   // clone the element returned by the superclass (Row)
   // and override its style with one without `contain: 'layout'`
    return React.cloneElement(superElement, { style })
  }
}

export default class CustomRowRenderer extends React.Component {
  setScrollLeft = (scrollBy) => {
    this.row.setScrollLeft(scrollBy);
  }

  render() {
    // using my custom row
    return <CustomRow ref={node => this.row = node} {...this.props} />
  }
}

Usage:

<ReactDataGrid rowRenderer={CustomRowRenderer} />

[milesrichardson]

Nice find @yosbelms !

[ponnuru]

Good Job @yosbelms

[galleyrob]

commenting out two occurences of 'contain: 'layout' in react-data-grid.js seems to do the trick and bring the horizontal scroll bar back

Still testing, will post back after some scrutinization.

Still doesnt resize properly when changing browser size though (issue 916) which is a far bigger problem!

[itoresano]

I have a similar issue using Google Chrome v70 (only the mac version). getCellActions dropdown menu closes instantly when the pointer leaves the button, it is also reproducible in adazzle demo grids and it also works properly removing the css property contain: layout

[najamm]

This seems to work:

.react-grid-Row {
  contain: none !important;
}

none is the default value: https://developer.mozilla.org/en-US/docs/Web/CSS/contain

[amanmahajan7]

Fixed in #1346

[himaChhag]

@yosbelms that fixed my problem! Got the horizontal scroll bar back. Brilliant!