[DataGrid Pro] Disable cell highlight on click

[guytepper]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

Hi there!
I might be missing something, but I can't find a way to disable the cell highlight effect on DataGridPro.
I'm using v6.0.0-beta.5. I tried seting disableRowSelectionOnClick on the component, but it works only for the row selection, not for individual cells.

Does this option exist? If not, it'd be great to have it! :-)

[m4theushw]

This blue border is actually outlining the cell with focus. You can remove it by customizing the CSS.

<DataGrid
  sx={{
    [`& .${gridClasses.columnHeader}, & .${gridClasses.cell}`]: {
      outline: 'transparent',
    },
    [`& .${gridClasses.columnHeader}:focus-within, & .${gridClasses.cell}:focus-within`]: {
      outline: 'none',
    },
  }}
/>

[githorse]

Personally I think disabling this highlight should be the default, or at least should be controlled by a flag so I can easily toggle it off. I don't understand why anyone would want the distracting highlight when the "active" (highlighted) cell doesn't actually do anything special -- it just happens to be the last thing I clicked on. The highlight implies to me that something is supposed to happen when I click on that cell, but in general that's not the case. In the example above, I should be able to click on the "OPEN" button -- clicking on the cell itself doesn't really seem to make sense.

Maybe I'm missing something here about what the highlight is supposed to be telling me?

[m4theushw]

The cell highlighting is useful for navigation between cells with the keyboard. It might not make sense if you don't allow keyboard navigation, however, if you do, then it's necessary for the user to know which cell is focused.

[daidonpah]

I believe it is commonly agreed upon that this highlight is mostly undesired. Having a prop to toggle it is the right way to go. The UI that makes use of keyboard navigation and/or cell manipulation can enable it at will. A global prop on the root component could be inherited by every cell and cells could decide individually if they need the highlight. Simply removing the highlight with the css override seems hacky and does not allow for clean code and flexibility.

[jewseppi]

so what was the end result of this? the issue is closed but sounds like its not resolved?

[rfrankspk]

This blue border is actually outlining the cell with focus. You can remove it by customizing the CSS.

<DataGrid
  sx={{
    [`& .${gridClasses.columnHeader}, & .${gridClasses.cell}`]: {
      outline: 'transparent',
    },
    [`& .${gridClasses.columnHeader}:focus-within, & .${gridClasses.cell}:focus-within`]: {
      outline: 'none',
    },
  }}
/>

This seems like a brittle way to manage this. If the underlying structure or classes ever did change, this may break. Having it at a property level gives some insulation to consumers of this change.

If there is a disableRowSelectionOnClick property, why wouldn't a disableCellSelectionOnClick also not make sense?