[DataGrid] Fix Space triggering edit mode

[m4theushw]

Fixes #8171

Space is not a key that should trigger the edit mode.

[mui-bot]

Netlify deploy preview

Netlify deploy preview: https://deploy-preview-8180--material-ui-x.netlify.app/

Updated pages

No updates.

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	627.5	1,390.4	642.9	909.5	277.254
Sort 100k rows	ms	665.3	1,447	1,447	1,065.36	256.256
Select 100k rows	ms	222.1	458	402.3	370.38	88.031
Deselect 100k rows	ms	168.1	412.5	249.1	265.64	81.266

Generated by 🚫 dangerJS against 74daf61

[MBilalShafi]

When pressing space, the focus goes to last row of current or next visual page *, my natural expectation was that Shift + space would do the exact opposite (going to first row or first row of previous visual page) but instead it selects/unselects the row.

Do you think we should review this interaction to make keyboard navigation a bit more easier. 🤔

* By visual page I mean currently visible rows without scrolling

[m4theushw]

Do you think we should review this interaction to make keyboard navigation a bit more easier. 🤔

I don't know why this Space shortcut exists in the first place. I don't think someone uses it and it could be a candidate for removal in v7.

[shantanutheone]

How to add space in the text itself while in editing mode? It's currently scrolling.

[laikai0000]

@m4theushw

How to add space in the text itself while in editing mode? It's currently scrolling.

[MBilalShafi]

How to add space in the text itself while in editing mode? It's currently scrolling.

It's working for me when in edit mode. Could you attach reproduction steps or a video maybe?

[laikai0000]

@MBilalShafi Hi Bilal Select the currently available cell and press the spacebar to scroll. I want to fix the current location.

[laikai0000]

hurry up

…

On Tue, Sep 24, 2024 at 3:07 PM Bilal Shafi ***@***.***> wrote: How to add space in the text itself while in editing mode? It's currently scrolling. It's working for me when in edit mode. Could you attach reproduction steps or a video maybe? — Reply to this email directly, view it on GitHub <#8180 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BG5W5FRJIBGSNFOU4HJIVNDZYD6TNAVCNFSM6AAAAABLB7L7KGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGNZQGI3TAOJYGM> . You are receiving this because you commented.Message ID: ***@***.***>

[laikai0000]

When I select that cell and click the spacebar, it starts scrolling.
How do I fix this?

<DataGridPremium
          apiRef={apiRef}
        /......
       onCellKeyDown={handleOnCellKeyDown}
 />
 
 const handleOnCellKeyDown: DataGridPremiumPropsWithoutDefaultValue["onCellKeyDown"] = async (params, event) => {
  if (event.code === "Space") {
            event.preventDefault();


    }
 }      

[MBilalShafi]

Hey @laikai0000,

You could use event.defaultMuiPrevented = "true" to stop the Space key from triggering the scroll.

const handleCellKeyDown = (_, event) => {
  if (event.key === " ") {
    event.defaultMuiPrevented = true;
  }
}

Here's a live example: https://codesandbox.io/p/sandbox/suspicious-payne-qt3wsw

Let me know if it solves your concern.

[laikai0000]

Hi @MBilalShafi
Thanks for your reply.
But it doesn't seem to solve the problem.
I would like to keep focus and not scroll.

[MBilalShafi]

@laikai0000 I mistakenly attached a different example previously, sorry about that. I've updated the example, can you check again?

It's both keeping the focus and not scrolling

Focus.mp4

[laikai0000]

@MBilalShafi
thx
However, if you try to switch to edit mode, scrolling occurs.
How do I fix this?

if (event.key === " ") {
      event.defaultMuiPrevented = true;
           apiRef.current.startCellEditMode({id: rowId, field: field});

    }

[MBilalShafi]

It's working fine for me.
https://github.com/user-attachments/assets/26b86074-becc-4b1f-a7c0-e017259a7879

Can you check again: https://codesandbox.io/p/sandbox/suspicious-payne-qt3wsw ?

[laikai0000]

sorry const {hnadleCellKeyDown} = DatagridEvents(apiRef); <DataGridPremium apiRef={apiRef} onCellKeyDown={handleCellKeyDown) /> * datagrid-event.ts* export const DatagridEvents = (apiRef:React.MutableRefObject<GridApiPremium>) => { const handleCellKeyDown: DataGridPremiumPropsWithoutDefaultValue["onCellKeyDown"] = async (params, event) => { if(event.key === ' ') { event.defaultMuiPrevented = true; apiRef.current.startCellEditMode({id: rowId, field: field}); } } return { handleCellKeyDown, } } Select the currently available cell and press the spacebar to scroll.

…

On Fri, Sep 27, 2024 at 3:40 AM Bilal Shafi ***@***.***> wrote: It's working fine for me. https://github.com/user-attachments/assets/26b86074-becc-4b1f-a7c0-e017259a7879 Can you check again: https://codesandbox.io/p/sandbox/suspicious-payne-qt3wsw ? — Reply to this email directly, view it on GitHub <#8180 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BG5W5FU542MQRMBHAJHHM3TZYRILNAVCNFSM6AAAAABLB7L7KGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGNZXGY3TEOJXGM> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[MBilalShafi]

@laikai0000 I won't be able to properly assist you further unless you provide a live reproduction of the issue, kindly fork my codesandbox link, reproduce the problem, and share your updated fork here.

Mentioning the reproduction steps (if there's a particular sequence) would even be better.

I'd also request you to take any further discussion in a new or recent issue, since this issue is quite old.