Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Drag and drop feedback for comparison table #1551

Merged
merged 8 commits into from
Apr 13, 2022

Conversation

sroy3
Copy link
Contributor

@sroy3 sroy3 commented Apr 11, 2022

Part of #1451

Screen.Recording.2022-04-11.at.11.07.10.AM.mov

@sroy3 sroy3 added the product PR that affects product label Apr 11, 2022
@sroy3 sroy3 self-assigned this Apr 11, 2022
) {
return singleUseListener.dispose()
}
const singleUseListener: Disposable = window.onDidChangeActiveTextEditor(
Copy link
Contributor Author

@sroy3 sroy3 Apr 11, 2022

Choose a reason for hiding this comment

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

Just typed singleUseListener because the linter wasn't happy.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This is also the reason for the PR coverage not being 100%

@sroy3 sroy3 marked this pull request as ready for review April 11, 2022 15:13
Copy link
Contributor

@rogermparent rogermparent left a comment

Choose a reason for hiding this comment

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

Seems like the position the column ends up in isn't always the one the feedback shows

drag-drop-bug-demo.mp4

@sroy3
Copy link
Contributor Author

sroy3 commented Apr 12, 2022

Seems like the position the column ends up in isn't always the one the feedback shows

drag-drop-bug-demo.mp4

Was not easy to figure what was happening, but I see it now. There are 4 options on drop (drop on next, drop on previous, drop on next placeholder and drop on previous placeholder) and they should all result in different order change. Weirdly enough I cared about one case one way and another on the other. I'll fix and add tests.

@sroy3 sroy3 marked this pull request as draft April 13, 2022 12:32
@sroy3 sroy3 marked this pull request as ready for review April 13, 2022 13:33
@codeclimate
Copy link

codeclimate bot commented Apr 13, 2022

Code Climate has analyzed commit 5e44d84 and detected 0 issues on this pull request.

The test coverage on the diff in this pull request is 95.9% (85% is the threshold).

This pull request will bring the total coverage in the repository to 96.7% (0.0% change).

View more on Code Climate.

Comment on lines +84 to +89
setTimeout(() => setSectionOrder([newSection, ...updatedSections]), 0)
}
return
}
if (lastSection.group !== group) {
setSectionOrder([...updatedSections, newSection])
setTimeout(() => setSectionOrder([...updatedSections, newSection]), 0)
Copy link
Contributor

Choose a reason for hiding this comment

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

What happens if these aren't wrapped in setTimeout? Some sort of race condition?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This section of the code is called onDrop and the drop event happens before the dragend event. onDragEnd is where the cleanup happens. If we call setSectionOrder before, the item is in a new section and has no access to the state of its previous section. We also cannot defer the whole function because group and draggedId would be cleared before being used.

Copy link
Contributor

@rogermparent rogermparent left a comment

Choose a reason for hiding this comment

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

Everything works well for me now!

@mattseddon
Copy link
Contributor

[N] Drop highlight shows over the pinned column (final behaviour is expected)

Screen.Recording.2022-04-14.at.8.22.21.am.mov

@mattseddon mattseddon merged commit 5ee8634 into main Apr 13, 2022
@mattseddon mattseddon deleted the comparison-table-drag-drop-feedback branch April 13, 2022 22:23
@sroy3
Copy link
Contributor Author

sroy3 commented Apr 14, 2022

[N] Drop highlight shows over the pinned column (final behaviour is expected)

Screen.Recording.2022-04-14.at.8.22.21.am.mov

Thanks will add to my list and fix soon

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
product PR that affects product
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants