Toolbar dropdowns when dragging items

[chexee]

When dragging metaboxes, widgets, menu items, etc to the top of the window in order to scroll to drop the item on a portion of the UI that's above the viewing window, the toolbar interferes and produces dropdowns, etc.

If dragging an item, can we disable toolbar actions?

[ocean90]

Screenshot?

[chexee]

Attached. Sorry, had to open grab and do a timed screenshot. Kept dropping the menu item when I used shortcuts.

[nacin]

Sounds like a bug, but I can reproduce this in 3.2 as well.

I imagine this should be easy to do?

[drecodeam]

resolved issue by binding empty functions on 'start' method of jquery sortable function and then binding original functions on 'stop' method.

[nacin]

Updating "admin menu" to "toolbar" since "admin menu" refers to the left menu.

[enej]

This tickets needs a new patch. The current patch only changes the post meta boxes, also the file against witch the patch was applied to doesn't exist any more.

The bug currently effects all the different places we have the drag and drop feature.
(menus, widgets and post-meta boxes but not galleries)

Since its a minor bug I would suggest fixing it once MP6 is released.

[jessepollak]

Definitely not the most elegant solution, but I figured I would take a stab and then work from there with people's feedback. This fixes the problem for widgets, post-meta boxes and menus; I'm pretty sure those are the only places it was an issue.

In a more ideal patch, we'd only add the draggable.start and draggable.stop triggers once, rather than every time we make something draggable. The current solution would leave room to reintroduce this bug the next time we add a draggable element.

[sujin2f]

Oh, I think I misunderstood this system. I did checkout from stable version. Please ignore it. I will patch it later.

[sujin2f]

I changed it by giving the css class 'disable' to dropdown menu while drag&drop.

[akibjorklund]

I've attached another attempt to fix this. With a single selector I'm targeting all current draggables and sortables, so there is no need to add code to all event handlers. The patch also disables popup menus on the admin menu in addition to the toolbar, which is less of an issue but still.

I'm using toggleClass on dragstart and dragstop instead of explicitly adding a class and removing it. This might cause issues with state on some browsers if the events don't always fire in a predictable order, but it did work flawlessly on the ones I tested it with.

[sabernhardt]

I see this is still an issue, and the patch would need a refresh (editing the script within \src\js\_enqueues\admin\common.js, and the admin-menu stylesheet doesn't apply anymore).

[sabernhardt]

18556.6.diff​ helps when dragging Menu items and metaboxes (in the block editor, Classic Editor, Classic Widgets and Dashboard). The block editor (posts or widgets) already prevents opening the menus when dragging blocks.

Changes:

• The side admin selectors needed to be more specific to avoid hiding the "current" submenus (which show directly under their parent).
• I used the existing hidden class, available in the admin, instead of adding a new class in the CSS.
• The toolbar's About dropdown still needed a CSS adjustment to override display:block on the secondary list.

Trac ticket: https://core.trac.wordpress.org/ticket/18556

[audrasjb]

Just opened a PR to refresh the patch against trunk and so it could be tested against the test suite

[audrasjb]

Checks are passing: ​https://github.com/WordPress/wordpress-develop/pull/1894

[Boniu91]

@audrasjb I'm not able to validate the patch, or I might be missing something. The dropdowns are still being opened, etc. Please find the Test Report below.

Test Report

Env

• WordPress 5.9-alpha-51272-src
• Chrome 95.0.4638.69
• Windows 10
• Theme: Twenty Twenty One

Steps to test

1. Add a new menu
2. Catch one of the items and navigate with it to the top menu
3. See that dropdown opens
4. Navigate with it to the sidebar menu and check if other menus open

Screencast:
​https://www.loom.com/share/180f28d8ed224b10ae671b825653f8b3

Screenshot:

[sabernhardt]

@Boniu91 Thanks for testing!

We can revisit this for a future release, then.