Merge pull request #924 from jbetancur/fix/922

fixes broken context menu
jbetancur · Sep 25, 2021 · 56a169b · 56a169b
2 parents 6060386 + f6e4a4b
commit 56a169b
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-data-table-component",
-  "version": "7.3.0",
+  "version": "7.3.1",
   "description": "A simple to use declarative react based data table",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",

diff --git a/src/DataTable/__tests__/__snapshots__/DataTable.test.tsx.snap b/src/DataTable/__tests__/__snapshots__/DataTable.test.tsx.snap
@@ -350,6 +350,9 @@ exports[`DataTable::Header should render a custom component within the context m
   -webkit-transition-timing-function: cubic-bezier(0,0,0.2,1);
   transition-timing-function: cubic-bezier(0,0,0.2,1);
   will-change: transform;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
 }
 
 .c0 {
@@ -479,6 +482,9 @@ exports[`DataTable::Header should render context menu actions when they are prov
   -webkit-transition-timing-function: cubic-bezier(0,0,0.2,1);
   transition-timing-function: cubic-bezier(0,0,0.2,1);
   will-change: transform;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
 }
 
 .c0 {
@@ -621,6 +627,9 @@ exports[`DataTable::Header should render correctly when a custom contextMessage
   -webkit-transition-timing-function: cubic-bezier(0,0,0.2,1);
   transition-timing-function: cubic-bezier(0,0,0.2,1);
   will-change: transform;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
 }
 
 .c0 {
@@ -755,6 +764,9 @@ exports[`DataTable::Header should render correctly when a custom contextMessage
   -webkit-transition-timing-function: cubic-bezier(0,0,0.2,1);
   transition-timing-function: cubic-bezier(0,0,0.2,1);
   will-change: transform;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
 }
 
 .c0 {
@@ -1054,6 +1066,9 @@ exports[`DataTable::Header should render the default context menu when using sel
   -webkit-transition-timing-function: cubic-bezier(0,0,0.2,1);
   transition-timing-function: cubic-bezier(0,0,0.2,1);
   will-change: transform;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
 }
 
 .c0 {

diff --git a/src/DataTable/styles.ts b/src/DataTable/styles.ts
@@ -86,6 +86,9 @@ export const defaultStyles = (theme: Theme): TableStyles => ({
 			transitionTimingFunction: 'cubic-bezier(0, 0, 0.2, 1)',
 			willChange: 'transform',
 		},
+		activeStyle: {
+			transform: 'translate3d(0, 0, 0)',
+		},
 	},
 	cells: {
 		style: {