Skip to content

MudDropContainer: Fix drag preview "ghost" glitch#10652

Merged
henon merged 5 commits intoMudBlazor:devfrom
Anu6is:10645-DropZone-Preview-Fix
Jan 26, 2025
Merged

MudDropContainer: Fix drag preview "ghost" glitch#10652
henon merged 5 commits intoMudBlazor:devfrom
Anu6is:10645-DropZone-Preview-Fix

Conversation

@Anu6is
Copy link
Contributor

@Anu6is Anu6is commented Jan 18, 2025

Description

Based on various tests, the issue occurs when:

  • The ItemRenderer includes a component with Ripple enabled
  • The user drags the mud-drop-item-preview-start div
  • The user drags an element in the ChildContent of the MudDropContainer

This fix addresses each above scenario by

  • Overriding the mud-ripple:after css when nested in a mud-drop-item
  • applying user-select: none to the MudDropContianer and mud-drop-item-preview-start class

Note: This means that general text within the MudDropContainer can not be selected.
However, Buttons, Checkboxes and such are still clickable.

Resolves: #10645
Resolves: #6427
Resolves: #4601
Resolves: #9836
Resolves: #8147
Resolves: #5869
Resolves: #3991

How Has This Been Tested?

Visually

Type of Changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Documentation (fix or improvement to the website or code docs)

Checklist

  • The PR is submitted to the correct branch (dev).
  • My code follows the code style of this project.
  • I've added relevant tests.

@github-actions github-actions bot added bug Unexpected behavior or functionality not working as intended PR: needs review labels Jan 18, 2025
@sonarqubecloud
Copy link

@Anu6is Anu6is requested a review from henon January 23, 2025 17:29
@henon henon requested a review from danielchalmers January 24, 2025 11:39
Copy link
Contributor

@henon henon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Makes sense, text in a drop container will probably never need to be selectable, right?

@Anu6is
Copy link
Contributor Author

Anu6is commented Jan 24, 2025

Hopefully, we will see if anyone raises an issue. That's the only change I was uncertain of making but it should not be a big impact and I can definitely reproduce the error if it's selectable.

@ScarletKuro
Copy link
Member

Makes sense, text in a drop container will probably never need to be selectable, right?

Hmmm, one case I can see it being useful to be selectable is Kanban board? Tho it seems like even in github it doesn't work well, you can select the first container, but not the others as when you try to do it, it inits the drag action.

Copy link
Member

@danielchalmers danielchalmers left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not that familiar with the drop zone but this seems to work nicely. I suppose for text selection it should be possible to define areas that are excluded from the drag start but maybe that already exists

@henon henon merged commit d6f2d21 into MudBlazor:dev Jan 26, 2025
6 checks passed
@henon
Copy link
Contributor

henon commented Jan 26, 2025

Thanks @Anu6is

@ScarletKuro
Copy link
Member

I think this change is problematic, since datagrid uses drop container even if you don't have drag and drop enabled, you can't select anything in the datagrid at all, and we don't have intuitive opt out for this logic, and somebody on discord already complained about it.

@ScarletKuro
Copy link
Member

Maybe we should at least add datagrid to exclusion and remove user-select for it.

@ScarletKuro
Copy link
Member

Also one moment, always do this in future:

Resolves: #10645
Resolves: #6427 
Resolves: #4601
Resolves: #9836
Resolves: #8147
Resolves: #5869
Resolves: #3991

rather than in one line, otherwise github will not register the issues and auto close them on merge.

@Anu6is
Copy link
Contributor Author

Anu6is commented Jan 28, 2025

Maybe we should at least add datagrid to exclusion and remove user-select for it.

Reverted the no select in the container. The other two fixes remain. Excluding data grid helps with our component but not if a user wraps something they made in a similar manner.

Another option could be adding a SelectContent parameter to the drop container to toggle selection. But for now I think reverting is fine

@Anu6is Anu6is deleted the 10645-DropZone-Preview-Fix branch February 19, 2025 11:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Unexpected behavior or functionality not working as intended

Projects

None yet

4 participants