Unable to Navigate Autocomplete Suggestions via Keyboard in Theme & Plugin File Editor

[akshayrochaniwp]

This issue affects the built-in Theme and Plugin File Editor within the WordPress admin area.

When editing a file inside the editor, keyword suggestions appear as we type. However, there is a problem specifically with .php files:

• When typing in a .php file, the autocomplete suggestion list appears.
• Attempting to navigate the suggestions using the up/down arrow keys does not work as expected.
• The selection remains stuck on the first suggested item, making it impossible to move through the list via keyboard input.
• However, when selecting suggestions using the mouse cursor, they work as expected.

Here’s a screen recording demonstrating the issue : (​https://www.awesomescreenshot.com/video/37998611?key=262d499496bfcc778da2e6975eaaf248)

This issue is only present in .php files. Other file types such as .css, .js, and .html work correctly and allow navigation via keyboard input.

Steps to Reproduce:

1. Open the WordPress Theme or Plugin File Editor.
2. Edit a .php file and start typing a function or keyword that triggers the autocomplete suggestion list.
3. Try navigating the suggestion list using the up/down arrow keys.
4. Notice that the selection remains stuck on the first item and does not move.
5. Now, try selecting a suggestion with the mouse cursor—it works fine.

Expected Behavior:

• The up/down arrow keys should allow smooth navigation through the autocomplete suggestions, just like they do for .css, .js, and .html files.

Actual Behavior:

• Keyboard navigation is broken for .php files, preventing users from selecting suggestions efficiently.

Environment Details:

• WordPress Version: 6.7.2
• Browser: Chrome, Firefox
• Theme & Plugins: Tested with default theme Twenty Twenty-One and no plugin active.

Would appreciate further insights or confirmation from the Core team on this. Thank you!

Fixed autocomplete dropdown navigation for PHP files :

• Intercepting Up/Down arrow keys
• Manually handling hint selection to prevent the cursor resetting to the first item when navigating through suggestions.

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

[vrishabhsk]

Hi @akshayrochaniwp 👋🏽

• I have raised a PR for fixing this issue : ​https://github.com/WordPress/wordpress-develop/pull/8598

Let me know your thoughts on this. Thanks

​`WP Playground Instance`

Hello @Vrishabhsk

Thanks for providing the fix and the WP Playground instance!
I have tested it, and it successfully resolves the issue. Looks good to me! 👍

Hello @Vrishabhsk

Thanks for providing the fix and the WP Playground instance!
I have tested it, and it successfully resolves the issue. Looks good to me! 👍

Hello @Vrishabhsk

Please ignore the previous message, that was added from the wrong GitHub account.

Thanks for providing the fix and the WP Playground instance!
I have tested it, and it successfully resolves the issue. Looks good to me! 👍

Hello @Vrishabhsk

Please ignore the previous message, that was added from the wrong GitHub account.

Thanks for providing the fix and the WP Playground instance!
I have tested it, and it successfully resolves the issue. Looks good to me! 👍

Hello @Vrishabhsk

Please ignore the previous message, that was added from the wrong GitHub account.

Thanks for providing the fix and the WP Playground instance!
I have tested it, and it successfully resolves the issue. Looks good to me! 👍

[joedolson]

Milestoning for 7.0. I'm setting the version as 4.9, which is when CodeMirror was introduced, although in fact this could have been introduced at some intermediary stage.

[joedolson]

Going to wait on the updates in #48456 being committed. Have verified that this issue still exists with the updated version of CodeMirror, but I think it will be better to update this patch after the commit.

[siliconforks]

An alternative to PR #8598

[siliconforks]

It was mentioned in Slack that ​PR #8598 is adding a surprisingly large amount of code for something which seems like it should be a simple bug fix.

I noticed that the code for handling other languages (HTML, CSS, JavaScript) usually checks whether the key pressed was an alphabetic key using the isAlphaKey variable (sometimes other keys are checked too). But the code for handling PHP does not do this. Wouldn't it be best to just have the PHP-specific code check isAlphaKey too?

[siliconforks]

I just noticed that #42822 is a similar issue.

[joedolson]

Duplicate of #42822.

Yep, you're absolutely right! This is a duplicate, I'd say. I'm going to mark this as a duplicate and move work there.