Fix Kanban drag-and-drop only registering drops near top of column#19061
Closed
jnMetaCode wants to merge 1 commit intotwentyhq:mainfrom
Closed
Fix Kanban drag-and-drop only registering drops near top of column#19061jnMetaCode wants to merge 1 commit intotwentyhq:mainfrom
jnMetaCode wants to merge 1 commit intotwentyhq:mainfrom
Conversation
Move droppableProvided.placeholder back inside the innerRef container (StyledColumnCardsContainer) to satisfy @hello-pangea/dnd's API contract. The placeholder was moved outside the innerRef element in PR twentyhq#15714 as part of a performance optimization, which broke the library's hit detection for drop zones. This caused drops to only register near the top of target columns. Fixes twentyhq#18842
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Your free trial has ended. If you'd like to continue receiving code reviews, you can add a payment method here.
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
Contributor
Welcome!
Hello there, congrats on your first PR! We're excited to have you contributing to this project. |
Member
|
@jnMetaCode Please stop opening AI generated PR on this repository. You are not helping us and harming the community. This will be the only warning before ban: one more and that's it |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
droppableProvided.placeholderback inside theinnerRefcontainer (StyledColumnCardsContainer) to fix broken drag-and-drop in Kanban viewinnerRefelement in PR Improved Kanban performance #15714 as part of a performance optimization, which violated@hello-pangea/dnd's API contract requiring the placeholder to be rendered inside the same DOM node that receivesinnerRefRoot Cause
@hello-pangea/dndrequiresdroppableProvided.placeholderto be rendered inside the same DOM element that receivesdroppableProvided.innerRef. In the current code,innerRefis onStyledColumnCardsContainerinsideRecordBoardColumnCardsContainer, but the placeholder was rendered as a sibling in the parentRecordBoardColumn. This caused the droppable area to shrink when a card was dragged out, making drops only register near the top.Changes
RecordBoardColumnCardsContainer.tsx: AddeddroppableProvided.placeholderinside theStyledColumnCardsContainer(theinnerRefelement)RecordBoardColumn.tsx: Removed the placeholder from outside theDragAndDropLibraryLegacyReRenderBreakerwrapperTest plan
Fixes #18842