Fix some zIndex issues around frozen cells and editors

adazzle · Sep 5, 2018 · 5134c89 · 5134c89
1 parent 81137a9
commit 5134c89
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 9 deletions.
diff --git a/packages/react-data-grid/src/constants/zIndexes.js b/packages/react-data-grid/src/constants/zIndexes.js
@@ -1,5 +1,6 @@
 export default {
-  CELL_MASK: 300,
-  LOCKED_CELL_MASK: 400,
-  EDITOR_CONTAINER: 500
+  CELL_MASK: 5,
+  EDITOR_CONTAINER: 10,
+  FROZEN_CELL_MASK: 15,
+  FROZEN_EDITOR_CONTAINER: 20
 };
diff --git a/packages/react-data-grid/src/editors/EditorContainer.js b/packages/react-data-grid/src/editors/EditorContainer.js
@@ -323,7 +323,8 @@ class EditorContainer extends React.Component {
   render() {
     const { left, top, width, height, column, scrollLeft } = this.props;
     const editorLeft = columnUtils.isFrozen(column) ? left + scrollLeft : left;
-    const style = { position: 'absolute', height, width, zIndex: zIndexes.EDITOR_CONTAINER, transform: `translate(${editorLeft}px, ${top}px)` };
+    const zIndex = columnUtils.isFrozen(column) ? zIndexes.FROZEN_EDITOR_CONTAINER : zIndexes.EDITOR_CONTAINER;
+    const style = { position: 'absolute', height, width, zIndex, transform: `translate(${editorLeft}px, ${top}px)` };
     return (
         <div style={style} className={this.getContainerClass()} onBlur={this.handleBlur} onKeyDown={this.onKeyDown} onContextMenu={this.handleRightClick}>
           {this.createEditor()}

diff --git a/packages/react-data-grid/src/masks/SelectionMask.js b/packages/react-data-grid/src/masks/SelectionMask.js
@@ -18,7 +18,7 @@ export const getCellMaskDimensions = ({ selectedPosition, columns, scrollLeft, g
   const height = getSelectedRowHeight(selectedPosition.rowIdx);
   const top = getSelectedRowTop(selectedPosition.rowIdx);
   const frozen = isFrozenColumn(columns, selectedPosition);
-  const zIndex = frozen ? zIndexes.LOCKED_CELL_MASK :  zIndexes.CELL_MASK;
+  const zIndex = frozen ? zIndexes.FROZEN_CELL_MASK :  zIndexes.CELL_MASK;
   const left = getLeftPosition(frozen, scrollLeft, column.left);
   return {height, top, width: column.width, left, zIndex};
 };

diff --git a/packages/react-data-grid/src/utils/SelectedCellUtils.js b/packages/react-data-grid/src/utils/SelectedCellUtils.js
@@ -17,7 +17,7 @@ export const getSelectedDimensions = ({ selectedPosition, columns, rowHeight })
     const column = columnUtils.getColumn(columns, idx);
     const { width, left, frozen } = column;
     const top = getRowTop(rowIdx, rowHeight);
-    const zIndex = frozen ? zIndexes.LOCKED_CELL_MASK : zIndexes.CELL_MASK;
+    const zIndex = frozen ? zIndexes.FROZEN_CELL_MASK : zIndexes.CELL_MASK;
     return { width, left, top, height: rowHeight, zIndex };
   }
   return { width: 0, left: 0, top: 0, height: rowHeight, zIndex: 1 };
@@ -44,7 +44,7 @@ export const getSelectedRangeDimensions = ({ selectedRange, columns, rowHeight }
   const { totalWidth, anyColFrozen, left } = getColumnRangeProperties(topLeft.idx, bottomRight.idx, columns);
   const top = getRowTop(topLeft.rowIdx, rowHeight);
   const height = (bottomRight.rowIdx - topLeft.rowIdx + 1) * rowHeight;
-  const zIndex = anyColFrozen ? zIndexes.LOCKED_CELL_MASK : zIndexes.CELL_MASK;
+  const zIndex = anyColFrozen ? zIndexes.FROZEN_CELL_MASK : zIndexes.CELL_MASK;
 
   return { width: totalWidth, left, top, height, zIndex };
 };

diff --git a/themes/react-data-grid-cell.css b/themes/react-data-grid-cell.css
@@ -20,11 +20,11 @@
 }
 
 .react-grid-Cell--frozen {
-  z-index: 300;
+  z-index: 12;
 }
 
 .react-grid-Cell--frozen:focus {
-  z-index: 300;
+  z-index: 12;
 }
 
 .rdg-last--frozen {