[DataGrid] Fix separator styles on touch devices (#14471)

mui · Sep 4, 2024 · 2e38064 · 2e38064
1 parent d7e51c0
commit 2e38064
Showing 1 changed file with 19 additions and 9 deletions.
diff --git a/packages/x-data-grid/src/components/containers/GridRootStyles.ts b/packages/x-data-grid/src/components/containers/GridRootStyles.ts
@@ -299,12 +299,13 @@ export const GridRootStyles = styled('div', {
       `]: {
       [`& .${c.columnSeparator}`]: {
         opacity: 0,
-        '@media (hover: none)': {
+      },
+      // Show resizable separators at all times on touch devices
+      '@media (hover: none)': {
+        [`& .${c['columnSeparator--resizable']}`]: {
           opacity: 1,
-          color: (t.vars || t).palette.primary.main,
         },
       },
-      // Show resizable separators again when the column is hovered
       [`& .${c['columnSeparator--resizable']}:hover`]: {
         opacity: 1,
       },
@@ -411,6 +412,14 @@ export const GridRootStyles = styled('div', {
     },
     '@media (hover: none)': {
       [`& .${c.columnHeader}`]: columnHeaderStyles,
+      [`& .${c.columnHeader}:focus,
+        & .${c.columnHeader}:focus-within,
+        & .${c.columnHeader}:has(+ .${c.columnHeader}:focus),
+        & .${c.columnHeader}:has(+ .${c.columnHeader}:focus-within)`]: {
+        [`.${c['columnSeparator--resizable']}`]: {
+          color: (t.vars || t).palette.primary.main,
+        },
+      },
     },
     [`& .${c['columnSeparator--sideLeft']}`]: {
       left: columnSeparatorOffset,
@@ -427,16 +436,17 @@ export const GridRootStyles = styled('div', {
     [`& .${c['columnSeparator--resizable']}`]: {
       cursor: 'col-resize',
       touchAction: 'none',
+      [`&.${c['columnSeparator--resizing']}`]: {
+        color: (t.vars || t).palette.primary.main,
+      },
       // Always appear as draggable on touch devices
       '@media (hover: none)': {
         [`& .${c.iconSeparator} rect`]: separatorIconDragStyles,
-        color: borderColor,
       },
-      [`&:hover, &.${c['columnSeparator--resizing']}`]: {
-        color: (t.vars || t).palette.primary.main,
-        [`& .${c.iconSeparator} rect`]: separatorIconDragStyles,
-        '@media (hover: none)': {
-          color: borderColor,
+      '@media (hover: hover)': {
+        '&:hover': {
+          color: (t.vars || t).palette.primary.main,
+          [`& .${c.iconSeparator} rect`]: separatorIconDragStyles,
         },
       },
       '& svg': {