[data grid] Autocomplete edit cell requires 2 clicks to exit edit mode

[Edelf]

Order ID 💳

28950

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

The problem in depth 🔍

With a grid in row edit mode and a cell with the autocomplete component, it takes two clicks to exit the edit mode and commit those changes.

How to reproduce:

1. open https://codesandbox.io/s/fullfeaturedcrudgrid-demo-mui-x-forked-epnq08?file=/demo.tsx
2. select a row and edit mode
   3a) if the user changes the "Name" cell and clicks once outside of the grid, it commits and goes into view mode
   3b) if the user changes the "Country" cell, it takes two clicks outside the grid in order to commit and set it to view mode.

In the example above, removing the following lines resolves the click issue, but creates another problem for keyboard users where on pressing Enter to select an option it will automatically commit and exit edit mode.
onClose={(ev) => { ev.preventDefault(); ev.stopPropagation(); }}

Your environment 🌎

`npx @mui/envinfo`

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

[m4theushw]

if the user changes the "Country" cell, it takes two clicks outside the grid in order to commit and set it to view mode.

Although it's rendered in a Portal we consider it as a click inside the row. Only the 2nd click triggers the exit from the edit mode.

I'm not sure if I understand correctly what you want to achieve. If you want to exit from the edit mode as soon as an option is selected, you can follow https://mui.com/x/react-data-grid/editing/#with-auto-stop We don't ship the built-in components with this behavior because it doesn't work with validation.

In the example above, removing the following lines resolves the click issue, but creates another problem for keyboard users where on pressing Enter to select an option it will automatically commit and exit edit mode.

You can listen to onRowEditStop and prevent the default behavior depending on the reason and field. Here's an example where a single click selects the value and commits it, while Enter only selects the value and the commit must be done through another way: https://codesandbox.io/s/fullfeaturedcrudgrid-demo-mui-x-forked-u6kd8g?file=/demo.tsx

[Edelf]

@m4theushw thank you for your reply.

What I'm trying to achieve is making the "end of edit mode" consistent across cells.
In the following video you can see that it requires 1 click outside of the grid to exit the edit mode on the "Name" cell, but requires 2 clicks to exit on the "Country" cell.
https://user-images.githubusercontent.com/9094216/179425113-309360c2-081a-4f5d-84a4-fc5e2d9fa417.mp4

I don't want to exit as soon as the user selects an option, since he may want to tab to other cells.

In summary, I want the autocomplete cell to behave exactly the same as other cells, where clicking once outside of the row or tabbing out of the row will commit and exit edit mode.

[m4theushw]

Thanks for providing the recording. If you remove the event.stopPropagation() inside onClose it works as expected. The event needs to propagate freely because we listen for any click inside the document to detect if the click was inside or outside the row.

[Edelf]

Do you mean like this?

onClose={(ev) => {
        ev.preventDefault();
        //ev.stopPropagation();
}}

If so, than it "breaks" the keyboard consistency where when the user presses enter to select an option it will exit edit mode:

The enter to select shouldn't commit/exit edit mode.

[m4theushw]

Do you mean like this?

Yes, any call to event.stopPropagation() breaks the grid.

If so, than it "breaks" the keyboard consistency where when the user presses enter to select an option it will exit edit mode:

Check the CodeSandbox I added in #5506 (comment) The ideal way to disable Enter is using onRowEditStop and event.defaultMuiPrevented = true.

[Edelf]

Check the CodeSandbox I added in #5506 (comment) The ideal way to disable Enter is using onRowEditStop and event.defaultMuiPrevented = true.

That will disable the "Enter to commit" behavior all together which is not what I need.
I need the user to be able to select an option using the keyboard without exiting the edit mode, like so:

But if he presses ENTER again after selecting an option, it will commit like any other cell.

[m4theushw]

Please check if https://codesandbox.io/s/fullfeaturedcrudgrid-demo-mui-x-forked-r3j7h4?file=/demo.tsx works. The idea is to disable the default behavior of Enter, then manually call apiRef.current.stopRowEditMode() if Enter was pressed while the autocomplete was closed.

[Edelf]

It worked!
Thank you very much!