Menu editing broken on mobile

[androidacy]

On mobile devices, places where elements can be dragged and dropped such as menu editing prevent any clickable items from being clicked (i.e. tapping the down arrow on a menu item does nothing besides initiate a drag).

Tested on: chrome v131

[im3dabasia1]

Hi @androidacy,

Thank you for your first ticket contribution!

Could you please share the steps to reproduce the issue you're experiencing? A screen recording would also be incredibly helpful in understanding and replicating the problem.

[priyankkpatel]

Hi @androidacy ,
I tried to reproduce the issue, but I can't. I checked the down arrow button after creating 3 level menu and can click a single one of those.
Please try to check the same in new WordPress setup.
Thanks

[sabernhardt]

I needed to tap the very edge of the element to expand each menu item in Chrome 130 + Android 11. It seems to have been an issue already in 6.6.2 (and possibly earlier).

[audrasjb]

As per today's bug scrub: Due to lack of activity on this ticket during this cycle, let's move it to the next milestone.

[vishalkakadiya]

Hi @androidacy @sabernhardt,

I tried to reproduce this issue on my end but I can't able to reproduced it.

• The dropdown for posts/pages selection is working fine, if we click on the label the panel is opening fine for post selections.

• The drag-drop selection for sorting the order of menu items is also working fine. To open a post which is added to the menu item we must click the right side arrow icon to open it and this behaviour is the same in Desktop as well.

If possible, Can you share the steps to reproduce this for the next steps on this?

Thanks!

[riccardodicurti]

I tested this on a real mobile device using Chrome v137 and WordPress 6.8.1.
In the Menus screen (/wp-admin/nav-menus.php), I was able to tap the down arrow to expand menu items without any issues. The drag behavior did not interfere with tapping controls.

It seems the issue reported in Chrome v131 may no longer be present in newer versions.

[androidacy]

Still very much an issue on edge (chromium based) mobile 137. Tapping anywhere but the exact edge does not expand as expected.

Sorry for delayed response, notifications are getting sent to spam

[androidacy]

​https://limewire.com/d/GzUWg#DubRI9ZABw screen recording (link expires in a week)

[mehul0810]

I have tested with WP version 6.8.1 and able to replicate the issue.

Steps to reproduce

1. Go to Appearance > Editor > Navigation
2. Ensure that you have atleast 3-4 menu items already there
3. Issue: the drag and drop of menu items and the 3 dots to the right of each menu item visibility on hover doesn't work
4. After investigating it seems that it is not an issue with screen size. But, it seems that the touch event is not working properly. So, when you "Inspect Element" and switch to see responsive screens where touch event is enabled, the issues mentioned in point (3) wont work in any screen size.

See here: ​https://share.cleanshot.com/Tgf89LFMCcKtf0cYt4lX

[SirLouen]

Replying to mehul0810:

I have tested with WP version 6.8.1 and able to replicate the issue.

Hi mehul, It's always useful to provide some testing environments attached to your steps
When making a report like this, I would recommend you to use the plugin "Test Reports", as it provides a little easy template with all the most useful system environments for a quick copy/paste

[mehul0810]

@SirLouen Thanks for the details. Please find the reproduction report below.

Reproduction Report

Description

This report validates whether the issue can be reproduced.

Environment

• WordPress: 6.8.1
• PHP: 8.3.0-dev
• Server: PHP.wasm
• Database: WP_SQLite_Translator (Server: 5.5 / Client: 3.40.1)
• Browser: Chrome 137.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Five 1.2
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Actual Results

1. ✅ Error condition occurs (reproduced)

Steps to Reproduce

1. Go to Appearance > Editor > Navigation
2. Ensure that you have atleast 3-4 menu items already there
3. Issue: the drag and drop of menu items and the 3 dots to the right of each menu item visibility on hover doesn't work
4. After investigating it seems that it is not an issue with screen size. But, it seems that the touch event is not working properly. So, when you "Inspect Element" and switch to see responsive screens where touch event is enabled, the issues mentioned in point (3) wont work in any screen size.

Supplemental Artifacts

​https://share.cleanshot.com/Tgf89LFMCcKtf0cYt4lX

[fclaussen]

I just tested this and I can tap the arrow just fine.

• Google Pixel 8 pro
• Chrome 141.0.7390.70
• WordPress 6.7 AND 6.8.3
• PHP 8.3.23

​https://www.youtube.com/shorts/_2O7v_A6pHM

[wildworks]

In this issue, I think it seems unclear what exactly should be tested first. It also seems unclear in this ticket whether "menu" refers to one of the following two options:

• The site editor's navigation menu: ​http://localhost:8888/wp-admin/site-editor.php?p=%2Fnavigation
• The classic editor's menu: ​http://localhost:8888/wp-admin/nav-menus.php

We need accurate information on which menu items should be tested.

Since it's not yet clear which one we should test at this point, I'd like to punt it to 7.0.