[question] Show EditingCell on hover

[socramm9]

Order ID 💳

26327

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

EDIT: See workaround in #5296 (comment)

The problem in depth 🔍

I am currently building a Grid where the user should be able to edit its contents on the fly. Unfortunately the current behavior, cell can be Edited on KeyPress/DoubleClick, is not enough for my needs.

Because of that I created a custom Cell that works exactly like I want. It works fine but has some Issues:

Main Issue:

• When the EditingCell is focused and the user tries to use the Arrow keys the focus is lost. Is it possible to trap the focus inside the input? How does the DefaultEditingCell do that?

Styling Questions:

• Because I am working with renderCell the default cell padding is applied. I probably could force some styles but what would be the best way to remove the default padding?
• Is the EditingCell boxShadow accessible using theme? Currently I have hardcode this value rgb(0 0 0 / 20%) 0px 3px 1px -2px, rgb(0 0 0 / 14%) 0px 2px 2px 0px, rgb(0 0 0 / 12%) 0px 1px 5px 0px

Here is a CodeSandbox that I created with my CustomCell.

Note: The OnChange function is not implemented

Is Anything else that I should do differently? I also tried using apiRef to activate the native Editing feature but I couldn't make it work like how I wanted.

Your environment 🌎

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[cherniavskii]

Hey @socramm9
I've started with controlled editing demo from the docs and created this one: https://codesandbox.io/s/starteditbuttongrid-demo-mui-x-forked-jwyndg?file=/demo.tsx

Is this what you are trying to achieve?

[socramm9]

Is this what you are trying to achieve?

Yes your codesandbox works exactly how I would expect. Thank you!

For the reason I am Implementing this is that I want to give the User visual feedback so he knows the cell is Editable.

[cherniavskii]

For the reason I am Implementing this is that I want to give the User visual feedback so he knows the cell is Editable.

For this case I would rather suggest showing edit button on cell hover and start editing only on edit button click.
Or using row editing with action buttons: https://mui.com/x/react-data-grid/editing/#full-featured-crud-component

[cherniavskii]

I want to give the User visual feedback so he knows the cell is Editable.

This might be something we can consider to improve editing feature discoverability.
The main concern seems to be that it's not obvious for the end users that cells can be edited.
What do you think @gerdadesign ?

[socramm9]

For this case I would rather suggest showing edit button on cell hover and start editing only on edit button click.

That could be an option but it would be an extra step that the user hast to take. For my case I would rather give the user the possibility to make quick edits without having to manually activating an "Edit Mode"

[gerdadesign]

@cherniavskii I like your sandbox! those cells are clearly editable on hover.

@socramm9 Are you able to explain more about your use case? I'm curious if adjusting the default behaviour would be helpful for others vs being able to customize to do this.

[socramm9]

@cherniavskii I like your sandbox! those cells are clearly editable on hover.

Yes I also like how it works. The only behavior that I would change is to keep cells in edit mode it it is focused. Cell should then only go back to view mode if an other cell is focused or on click away.

@socramm9 Are you able to explain more about your use case? I'm curious if adjusting the default behaviour would be helpful for others vs being able to customize to do this.

Yes for my case I have a big grid where users have to input values. I want to make the Editing experience as simple and intuitive as possible. Activating Edit mode on DoubleClick doesn't feel natural. In Excel Users are also not required to double klick a cell they can just click and edit.

[m4theushw]

In Excel Users are also not required to double klick a cell they can just click and edit.

We plain to add a demo with click to edit in #2186, but it's the same logic from the CodeSandbox provided in #5296 (comment)

I gathered in #1399 some inspiration of how other web applications style the editable cells.

[colespencer1453]

@m4theushw if you are looking for editable cell styling inspiration this UX shop has a pretty great article https://pencilandpaper.io/articles/ux-pattern-analysis-enterprise-data-tables/#things-to-consider.

I really like the outlined cell content with a slightly offset background color