Make WordPress Core

Opened 3 years ago

Last modified 3 years ago

#52926 new defect (bug)

mobile compatibility library sortable list input field ignores touch event

Reported by: edtorrey's profile edtorrey Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 5.7
Component: External Libraries Keywords: needs-patch
Focuses: ui, javascript, administration Cc:


The ability to edit a WP backend menu item custom url input field has not worked on my iPad iOS 14.4.1 using Safari and Chrome. Any text input field simply doesn't respond. Select choice list controls recognize touch.

I am using Admin Menu Editor Version 1.9.9 plugin.

On Mar 26, 2021, at 08:56, Janis Elsts <daerils@…> wrote:

Unfortunately, it looks like it's currently not feasible to fix this issue.

It appears that problem is in one of the JS libraries that is part of WordPress itself. It's a mobile compatibility library that's supposed to translate touch events into simulated mouse events. It doesn't seem to work correctly when you tap an input field that's inside a sortable list, like the menu item list in Admin Menu Editor.

I don't have enough mobile development experience to replace the existing JS library with something better, so this bug may remain unfixed until/unless WordPress core developers fix the underlying issue.

Change History (7)

#1 follow-up: @sabernhardt
3 years ago

  • Component changed from General to External Libraries

@edtorrey Thanks for the report!

Using the free version of the plugin, the "URL" and "Required capability" inputs are read-only for me, so I can't edit them on a desktop either.

@whiteshadow Which JS library is not working as expected? jQuery UI Touch Punch?

#2 @edtorrey
3 years ago

I know how to use a browser's Developer Toolbar from a desktop, but on my iPad, where I use touch, instead of mouse clicks, there is no Developer Toolbar tool. I don't know how to determine what JS function is being used. If someone can guide me to a way to do that, I am happy to try.

#3 in reply to: ↑ 1 ; follow-up: @whiteshadow
3 years ago

@sabernhardt Those inputs are read-only for preexisting menu items, like items that are part of WordPress core. To edit those fields, you'll need to either create a new item or change "Target page" to "Custom URL".

Yes, I think it is the "Touch Punch" library. The menu item list uses jQuery UI Sortable and it seems to interact with Touch Punch in such a way that inputs that are inside the draggable elements can't be focused by clicking/tapping them.

During my debugging I found that removing the touchstart event handler from the sortable container fixed the focus issue. As far as I can tell, Touch Punch automatically adds touch event handlers when something else registers a mousedown event (among others). Of course, removing the event handler breaks dragging/sorting, so it's not really a proper solution.

I tried a couple of forks of the Touch Punch library but they didn't seem to help with this particular problem.

#4 in reply to: ↑ 3 @sabernhardt
3 years ago

  • Milestone changed from Awaiting Review to 5.7.1

Wow! Thanks for the quick feedback!

Those inputs are read-only for preexisting menu items

That makes sense :)

I set the milestone to the upcoming minor version for attention, though I don't know if this could be ready within two weeks.

#5 @sabernhardt
3 years ago

  • Milestone changed from 5.7.1 to 5.8

This ticket was mentioned in Slack in #core by audrasjb. View the logs.

3 years ago

#7 @sabernhardt
3 years ago

  • Keywords needs-patch added
  • Milestone changed from 5.8 to Awaiting Review
Note: See TracTickets for help on using tickets.