fix(react-grid): prevent scrolling sticky header on Safari (#2178)

DevExpress · Jul 23, 2019 · 47666b7 · 47666b7
1 parent 88baf47
commit 47666b7
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 5 deletions.
diff --git a/packages/dx-react-grid-bootstrap3/src/templates/table-container.jsx b/packages/dx-react-grid-bootstrap3/src/templates/table-container.jsx
@@ -23,7 +23,9 @@ export const TableContainer = ({
     }}
     {...restProps}
   >
-    {children}
+    <div>
+      {children}
+    </div>
   </div>
 );
 

diff --git a/packages/dx-react-grid-bootstrap3/src/templates/table-container.test.jsx b/packages/dx-react-grid-bootstrap3/src/templates/table-container.test.jsx
@@ -12,7 +12,7 @@ describe('TableContainer', () => {
       </TableContainer>
     ));
 
-    expect(tree.find('div').prop('style'))
+    expect(tree.find('div').at(0).prop('style'))
       .toMatchObject({
         color: 'red',
       });
@@ -39,4 +39,16 @@ describe('TableContainer', () => {
     expect(tree.props().data)
       .toMatchObject({ a: 1 });
   });
+
+  it('should render a `div` block as a workaround Safari sticky bug', () => {
+    // https://bugs.webkit.org/show_bug.cgi?id=175029
+    const tree = shallow((
+      <TableContainer>
+        <div className="child" />
+      </TableContainer>
+    ));
+
+    expect(tree.find('div').length)
+      .toBe(3);
+  });
 });
diff --git a/packages/dx-react-grid-bootstrap4/src/templates/table-container.jsx b/packages/dx-react-grid-bootstrap4/src/templates/table-container.jsx
@@ -13,7 +13,9 @@ export const TableContainer = ({
     }}
     {...restProps}
   >
-    {children}
+    <div>
+      {children}
+    </div>
   </div>
 );
 

diff --git a/packages/dx-react-grid-bootstrap4/src/templates/table-container.test.jsx b/packages/dx-react-grid-bootstrap4/src/templates/table-container.test.jsx
@@ -32,9 +32,21 @@ describe('TableContainer', () => {
       </TableContainer>
     ));
 
-    expect(tree.find('div').prop('style'))
+    expect(tree.find('div').at(0).prop('style'))
       .toMatchObject({
         msOverflowStyle: 'auto',
       });
   });
+
+  it('should render a `div` block as a workaround Safari sticky bug', () => {
+    // https://bugs.webkit.org/show_bug.cgi?id=175029
+    const tree = shallow((
+      <TableContainer>
+        <div className="child" />
+      </TableContainer>
+    ));
+
+    expect(tree.find('div').length)
+      .toBe(3);
+  });
 });
diff --git a/packages/dx-react-grid-material-ui/src/templates/table-container.jsx b/packages/dx-react-grid-material-ui/src/templates/table-container.jsx
@@ -20,7 +20,9 @@ const TableContainerBase = ({
     className={classNames(classes.root, className)}
     {...restProps}
   >
-    {children}
+    <div>
+      {children}
+    </div>
   </div>
 );
 

diff --git a/packages/dx-react-grid-material-ui/src/templates/table-container.test.jsx b/packages/dx-react-grid-material-ui/src/templates/table-container.test.jsx
@@ -46,4 +46,16 @@ describe('TableContainer', () => {
     expect(tree.props().data)
       .toMatchObject({ a: 1 });
   });
+
+  it('should render a `div` block as a workaround Safari sticky bug', () => {
+    // https://bugs.webkit.org/show_bug.cgi?id=175029
+    const tree = shallow((
+      <TableContainer>
+        <div className="child" />
+      </TableContainer>
+    ));
+
+    expect(tree.find('div').length)
+      .toBe(3);
+  });
 });