Shortcuts make entering text impossible on mobile browsers

[tonyroberts]

Describe the bug

When trying to type a SQL query in a mobile browser (specifically, Safari or Chrome on an iPad), the keyboard shortcuts always fire. For example, if you select the SQL editor and start typing ‘select’, the first ‘s’ brings up the settings menu.

To Reproduce

Steps to reproduce the behavior:

1. Use the mobile versions of Safari or Chrome on an iPad
2. Go to the SQL tab
3. Select the query box
4. Press ‘s’
5. The settings window opens instead of putting an ‘s’ in the query box

Expected behavior

It should be possible to enter text into the SQL editor containing the letter ‘s’

Server configuration

• Operating system: Linux
• Web server: cpsrvd 11.78.0.21
• Database version: libmysql - 5.1.73 / 5.6.41-84.1 - Percona Server (GPL), Release 84.1, Revision b308619
• PHP version: 7.2.7
• phpMyAdmin version: 4.8.3

Client configuration

• Browser: Safari / Chrome
• Operating system: iOS

Additional context

Perhaps an option to simply disable shortcuts in the settings would be an OK solution?

[williamdes]

Seem to be a duplicate of #14711 but with a great description 😄

[williamdes]

Reproduced on chrome (Android), when typing multiple times 's' or 'S' in the sql query box

[JayEn84]

I'm using the browser plugin "User Agent Switcher" in Firefox and Chrome on Windows. This enables me to test the mobile view of websites. Once I switch to a mobile browser with the plugin and open PHPMyAdmin, the keyboard shortcuts are active even after entering the SQL command textarea. Maybe this helps finding the bug.

[JayEn84]

I have examined the problem in more detail:

The file "shortcuts_handler.js" uses the following code to disable the keyboard shortcuts for some special circumstances:

if (e.target.nodeName === 'INPUT' || e.target.nodeName === 'TEXTAREA' || e.target.nodeName === 'SELECT') {
    return;
}

This means, the keyboard shortcut functions won't fire if you press a shortcut key while inside an input, a textarea or a select element. And this works very well! However, the problem is that the SQL command "area" is not (always) a textarea. Under some circumstances it's a div with the attribute contenteditable=true, which then won't prevent the keyboard shortcut function from being executed.

I guess the above if statement should be extended in a way that also checks if the SQL command area is currently focused.

[williamdes]

Thank you for the debugging @JayEn84 !
Let me know if you want to open a pull-request to fix this issue

[JayEn84]

It's the first time I'm trying to do a pull request, and I'm not sure if I screwed up. :)

[williamdes]

It's the first time I'm trying to do a pull request, and I'm not sure if I screwed up. :)

Good first pull-request ;)

[williamdes]

I could reproduce this issue using https://chrome.google.com/webstore/detail/user-agent-switcher/clddifkhlkcojbojppdojfeeikdkgiae and "Firefox on Android Mobile"