mobile compatibility library sortable list input field ignores touch event

[edtorrey]

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.

[sabernhardt]

@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?

[edtorrey]

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.

[whiteshadow]

@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.

[sabernhardt]

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.