[DataGridPro] Prevent text selection when reordering rows #16568

jyash97 · 2025-02-13T13:00:11Z

Closes #16303

Debug Info on the same

I have followed (at least) the PR section of the contributing guide.

arminmeh · 2025-03-14T12:11:26Z

Thanks for the contribution @jyash97
Can you run prettier script to format the code properly?

Also, can you use the approach used in cell selection to disable the selection?

jyash97 · 2025-03-14T13:38:24Z

Hey @arminmeh

Thanks for the review, give me sometime will apply the changes

jyash97 · 2025-03-24T14:30:21Z

Hey @arminmeh I didnt get chance to look into these yet, I will try to get to these by Wednesday.

jyash97 · 2025-03-28T13:18:13Z

@arminmeh after making the requested changes, I see the issue happening again, I can confirm that the root class is being applied properly.

Didnt get chance to look further into these yet

arminmeh · 2025-03-28T13:20:05Z

@jyash97 thanks for the update. I will take a quick look and check what is different from your initial solution.
Thanks for the contribution so far

jyash97 · 2025-03-28T13:21:38Z

I will take a quick look and check what is different from your initial solution.

Awesome, looking forward to know what caused the regression.

Looking forward to contribute more once I get some bandwidth

mui-bot · 2025-04-23T09:43:27Z

Deploy preview: https://deploy-preview-16568--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against 7913daf

arminmeh · 2025-04-23T13:57:58Z

The root cause for this behavior is that, when the text is selected, event happens on the svg element rather on the div
Event handler picks it up because of the event bubbling, but because svg element is not actually moved dragStop event is called immediately causing timeout clearance, etc (explained in the debug info above)

I have tried other ways to prevent event on happening on the svg element, but none of them feels elegant enough.

From the last update from @jyash97 I have only moved the class append/remove logic into the same file, and tweaked the styles to apply on all elements once appended (before it was only on the regular cells)

romgrk · 2025-04-28T12:54:04Z

packages/x-data-grid/src/components/containers/GridRootStyles.ts

-    [`&.${c['root--disableUserSelection']} .${c.cell}`]: {
+    [`&.${c['root--disableUserSelection']}`]: {


Do we really need a class for this? It feels more verbose than it needs to be, we could just set style.userSelect = '...' directly.

I agree, but since we already have this class, I don't mind using it in this scenario too.

I am not sure how did we handle this in the past. Can we remove a class in the minor release?

I think we have stopped applying styles to classes internally, but not removed. Perhaps we can add to #17846

cherniavskii · 2025-04-28T18:26:13Z

Hi @jyash97
Thank you for this pull request! Your changes seem to impact the commercially licensed code. For any changes of this nature, we require contributors to sign the MUI’s Contributor License Agreement (CLA). However, I can’t find a CLA signed that could cover these changes. Please follow the steps at https://mui-org.notion.site/CLA-Contributor-License-Agreement-92ece655b1584b10b00e4de9e67eedb0 to sign the document.

jyash97 · 2025-05-02T13:13:52Z

Hey @cherniavskii

Can you check again? I might have missed it, I just filled the form

zannager · 2025-05-02T16:10:10Z

@jyash97 can you please complete the step 3? - Forward the “form submission confirmation” email (check also your spam folder) to [email protected] to confirm your identity. Also, include the link to the pull request it corresponds to. Thanks.

zannager · 2025-05-02T17:25:53Z

@cherniavskii CLA signed, thanks.

packages/x-data-grid-pro/src/hooks/features/rowReorder/useGridRowReorder.tsx

MBilalShafi · 2025-05-19T12:18:01Z

packages/x-data-grid-pro/src/components/GridRowReorderCell.tsx

+  const onMouseDown = React.useCallback(() => {
+    // Prevent text selection as it will block all the drag events. More context: https://github.com/mui/mui-x/issues/16303
+    apiRef.current.rootElementRef?.current?.classList.add(
+      gridClasses['root--disableUserSelection'],
+    );
+  }, [apiRef]);


Shouldn't we remove this class on onMouseUp?
onDragEnd doesn't necessarily get fired after each onMouseDown.

Good catch.
I did some testing and depending on the interaction, sometimes only onDragEnd is called, sometimes only onMouseUp and sometimes I see both.

Surprised onMouseUp only sometimes fires 🤔

I remember adding mouse up event to clear user selection, but was facing issue, don't remember the exact reason at the moment, but had to resort back to drag end event to clear it

KenanYusuf · 2025-05-19T09:11:57Z

packages/x-data-grid/src/components/containers/GridRootStyles.ts

-    [`&.${c['root--disableUserSelection']} .${c.cell}`]: {
+    [`&.${c['root--disableUserSelection']}`]: {


I agree, but since we already have this class, I don't mind using it in this scenario too.

packages/x-data-grid-pro/src/components/GridRowReorderCell.tsx

KenanYusuf · 2025-05-20T07:55:03Z

packages/x-data-grid-pro/src/components/GridRowReorderCell.tsx

+  const onMouseDown = React.useCallback(() => {
+    // Prevent text selection as it will block all the drag events. More context: https://github.com/mui/mui-x/issues/16303
+    apiRef.current.rootElementRef?.current?.classList.add(
+      gridClasses['root--disableUserSelection'],
+    );
+  }, [apiRef]);


Surprised onMouseUp only sometimes fires 🤔

github-actions · 2025-05-20T17:24:19Z

Cherry-pick PRs will be created targeting branches: v7.x

Co-authored-by: Armin Mehinovic <[email protected]>

zannager added the scope: data grid Changes or issues related to the data grid product label Feb 14, 2025

zannager requested a review from arminmeh March 14, 2025 08:55

arminmeh added type: bug A bug or unintended behavior in the components. feature: Reordering Related to the data grid Reordering feature needs cherry-pick The PR should be auto-cherry-picked to a version branch after merge—add a version label as target v7.x labels Mar 14, 2025

arminmeh changed the title ~~[DataGrid]: prevent text selection when reordering rows~~ [DataGrid] Prevent text selection when reordering rows Mar 14, 2025

arminmeh force-pushed the yash/fix/row-reorder branch from 83a0d8f to 0385855 Compare April 23, 2025 09:40

arminmeh requested a review from a team April 23, 2025 13:54

arminmeh enabled auto-merge (squash) April 24, 2025 06:20

arminmeh disabled auto-merge April 24, 2025 06:20

romgrk reviewed Apr 28, 2025

View reviewed changes

cherniavskii added the CLA: required See https://www.notion.so/mui-org/CLA-Contributor-License-Agreement-92ece655b1584b10b00e4de9e67eedb0 label Apr 28, 2025

zannager added CLA: signed See https://www.notion.so/mui-org/CLA-Contributor-License-Agreement-92ece655b1584b10b00e4de9e67eedb0 and removed CLA: required See https://www.notion.so/mui-org/CLA-Contributor-License-Agreement-92ece655b1584b10b00e4de9e67eedb0 labels May 2, 2025

arminmeh changed the title ~~[DataGrid] Prevent text selection when reordering rows~~ [DataGridPro] Prevent text selection when reordering rows May 5, 2025

arminmeh requested a review from a team May 19, 2025 07:03

MBilalShafi reviewed May 19, 2025

View reviewed changes

jyash97 and others added 4 commits May 20, 2025 09:35

[DataGrid]: prevent text selection when reordering rows

90eee08

use class to disable user selection & prettify code

2538a1c

Update styles. Keep the logic for the className change in the same file

b0a4766

revert reorder hook changes

4ad6412

arminmeh force-pushed the yash/fix/row-reorder branch from 718048d to 4ad6412 Compare May 20, 2025 07:37

handle mouse up event

b1cb2f4

arminmeh requested a review from MBilalShafi May 20, 2025 07:48

KenanYusuf reviewed May 20, 2025

View reviewed changes

align handler names

7913daf

arminmeh requested a review from KenanYusuf May 20, 2025 08:01

cherniavskii approved these changes May 20, 2025

View reviewed changes

arminmeh merged commit 0e6b079 into mui:master May 20, 2025
23 checks passed

github-actions bot pushed a commit that referenced this pull request May 20, 2025

[DataGridPro] Prevent text selection when reordering rows (#16568)

56f5256

Co-authored-by: Armin Mehinovic <[email protected]>

github-actions bot mentioned this pull request May 20, 2025

[DataGridPro] Prevent text selection when reordering rows (@jyash97) #17920

Merged

		[`&.${c['root--disableUserSelection']} .${c.cell}`]: {
		[`&.${c['root--disableUserSelection']}`]: {

Uh oh!

[DataGridPro] Prevent text selection when reordering rows #16568

[DataGridPro] Prevent text selection when reordering rows #16568

Uh oh!

Conversation

jyash97 commented Feb 13, 2025

Uh oh!

arminmeh commented Mar 14, 2025

Uh oh!

jyash97 commented Mar 14, 2025

Uh oh!

jyash97 commented Mar 24, 2025

Uh oh!

jyash97 commented Mar 28, 2025

Uh oh!

arminmeh commented Mar 28, 2025

Uh oh!

jyash97 commented Mar 28, 2025

Uh oh!

mui-bot commented Apr 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

arminmeh commented Apr 23, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

KenanYusuf May 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cherniavskii commented Apr 28, 2025

Uh oh!

jyash97 commented May 2, 2025

Uh oh!

zannager commented May 2, 2025

Uh oh!

zannager commented May 2, 2025

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions bot commented May 20, 2025

Uh oh!

Uh oh!

mui-bot commented Apr 23, 2025 •

edited

Loading

KenanYusuf May 20, 2025 •

edited

Loading