List View: Fix stuck dragging mode in UI in Firefox when dealing with deeply nested lists#60845
Merged
andrewserong merged 1 commit intotrunkfrom Apr 18, 2024
Conversation
… deeply nested lists
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
25 tasks
|
Size Change: +6 B (0%) Total Size: 1.75 MB
ℹ️ View Unchanged
|
ramonjd
approved these changes
Apr 18, 2024
Member
ramonjd
left a comment
There was a problem hiding this comment.
This was easy to reproduce by adding and duplicating blocks in the list view in Firefox.
Thanks for the fix.
Also tested in Chrome, Safari and MS Edge 👍🏻
Before
After
Contributor
Author
|
Thanks for the quick review! |
creativecoder
pushed a commit
that referenced
this pull request
May 1, 2024
… deeply nested lists (#60845) Co-authored-by: andrewserong <andrewserong@git.wordpress.org> Co-authored-by: ramonjd <ramonopoly@git.wordpress.org> Co-authored-by: diggeddy <diggeddy@git.wordpress.org>
Contributor
|
I just cherry-picked this PR to the update/fixes-for-wp-6-5-3 branch to get it included in the next release: 06e9898 |
aaronjorbin
pushed a commit
that referenced
this pull request
May 2, 2024
… deeply nested lists (#60845) Co-authored-by: andrewserong <andrewserong@git.wordpress.org> Co-authored-by: ramonjd <ramonopoly@git.wordpress.org> Co-authored-by: diggeddy <diggeddy@git.wordpress.org>
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
3 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.
What?
Part of #49563
Fix an issue where sometimes in Firefox, after dragging and dropping within the list view, the list view would become stuck in a dragging-like state, so there would be an unexpected additional whitespace between some list view items, with the drop indicator displaying when it shouldn't.
Kudos @diggeddy for raising the issue in #49563 (comment)
Why?
It seems that (for some reason) in Firefox, the order or presence of the
onDragEndcallback firing correctly and clearing out the throttled drag callback and target state is unreliable. I couldn't ascertain whether this is due to a browser issue, Gutenberg code, or a combination of the two. However, for now, a fix appears to be to also add thethrottled.cancel()and target clearing code to theonDropcallback. Nothing bad should happen if these are called too frequently when dropping a list item, but it is a problem if they're not called correctly, as can be seen in the before / after videos below.How?
In the List View's drop zone / drag and drop handlers, add the following to the
onDropcallback:throttled.cancelto cancel out any scheduled call to update the drop targetundefined) so that any styling rules that are active while a target is present are removedTesting Instructions
trunk, sometimes, it's possible to get stuck in a state where the list view drop indicator is still visible after dropping, and there is an unexpected space between some list view items.Testing Instructions for Keyboard
Screenshots or screencast
Before
2024-04-18.15.32.52.mp4
After
2024-04-18.15.35.11.mp4