Override all overflow styles in fixed grid quadrants

Author: codingbull

source/MultiGrid/MultiGrid.js

@@ -340,6 +340,8 @@ export default class MultiGrid extends Component {
         left: 0,
         outline: 0,
         overflow: 'hidden',
+        overflowX: 'hidden',
+        overflowY: 'hidden',
         position: 'absolute',
         ...styleBottomLeftGrid
       }
@@ -366,6 +368,8 @@ export default class MultiGrid extends Component {
         left: 0,
         outline: 0,
         overflow: 'hidden',
+        overflowX: 'hidden',
+        overflowY: 'hidden',
         position: 'absolute',
         top: 0,
         ...styleTopLeftGrid
@@ -381,6 +385,8 @@ export default class MultiGrid extends Component {
         left: this._getLeftGridWidth(props),
         outline: 0,
         overflow: 'hidden',
+        overflowX: 'hidden',
+        overflowY: 'hidden',
         position: 'absolute',
         top: 0,
         ...styleTopRightGrid

source/MultiGrid/MultiGrid.test.js

@@ -44,31 +44,56 @@ describe('MultiGrid', () => {
         fixedColumnCount: 1,
         fixedRowCount: 1
       })))
-      expect(rendered.querySelectorAll('.ReactVirtualized__Grid').length).toEqual(4)
+      const grids = rendered.querySelectorAll('.ReactVirtualized__Grid')
+      expect(grids.length).toEqual(4)
+      const [topLeft, topRight, bottomLeft, bottomRight] = grids
+      expect(topLeft.style.getPropertyValue('overflow')).toEqual('hidden')
+      expect(topLeft.style.getPropertyValue('overflow-x')).toEqual('hidden')
+      expect(topLeft.style.getPropertyValue('overflow-y')).toEqual('hidden')
+      expect(topRight.style.getPropertyValue('overflow')).toEqual('hidden')
+      expect(topRight.style.getPropertyValue('overflow-x')).toEqual('hidden')
+      expect(topRight.style.getPropertyValue('overflow-y')).toEqual('hidden')
+      expect(bottomLeft.style.getPropertyValue('overflow')).toEqual('hidden')
+      expect(bottomLeft.style.getPropertyValue('overflow-x')).toEqual('hidden')
+      expect(bottomLeft.style.getPropertyValue('overflow-y')).toEqual('hidden')
+      expect(bottomRight.style.getPropertyValue('overflow')).toEqual('auto')
+      expect(bottomRight.style.getPropertyValue('overflow-x')).toEqual('auto')
+      expect(bottomRight.style.getPropertyValue('overflow-y')).toEqual('auto')
     })
 
     it('should render 2 Grids when configured for fixed columns only', () => {
       const rendered = findDOMNode(render(getMarkup({
         fixedColumnCount: 1,
         fixedRowCount: 0
       })))
-      expect(rendered.querySelectorAll('.ReactVirtualized__Grid').length).toEqual(2)
+      const grids = rendered.querySelectorAll('.ReactVirtualized__Grid')
+      expect(grids.length).toEqual(2)
+      const [bottomLeft, bottomRight] = grids
+      expect(bottomLeft.style.getPropertyValue('overflow')).toEqual('hidden')
+      expect(bottomRight.style.getPropertyValue('overflow')).toEqual('auto')
     })
 
     it('should render 2 Grids when configured for fixed rows only', () => {
       const rendered = findDOMNode(render(getMarkup({
         fixedColumnCount: 0,
         fixedRowCount: 1
       })))
-      expect(rendered.querySelectorAll('.ReactVirtualized__Grid').length).toEqual(2)
+      const grids = rendered.querySelectorAll('.ReactVirtualized__Grid')
+      expect(grids.length).toEqual(2)
+      const [topRight, bottomRight] = grids
+      expect(topRight.style.getPropertyValue('overflow')).toEqual('hidden')
+      expect(bottomRight.style.getPropertyValue('overflow')).toEqual('auto')
     })
 
     it('should render 1 Grid when configured for neither fixed columns and rows', () => {
       const rendered = findDOMNode(render(getMarkup({
         fixedColumnCount: 0,
         fixedRowCount: 0
       })))
-      expect(rendered.querySelectorAll('.ReactVirtualized__Grid').length).toEqual(1)
+      const grids = rendered.querySelectorAll('.ReactVirtualized__Grid')
+      expect(grids.length).toEqual(1)
+      const [bottomRight] = grids
+      expect(bottomRight.style.getPropertyValue('overflow')).toEqual('auto')
     })
 
     it('should adjust the number of Grids when fixed column or row counts change', () => {