Autocomplete: Clicking to insert item does nothing when inside a table cell

[17cliu]

Description

When the autocomplete dropdown is opened inside a table cell, clicking on one of the items inside the dropdown does not insert the item. It also doesn't close the dropdown, but I can no longer navigate the dropdown with my keyboard either.

Step-by-step reproduction instructions

1. Go to https://wordpress.org/gutenberg/
2. Insert a table. The default dimensions (2x2) are sufficient.
3. In one of the table cells, type @ to begin inserting a mention. The autocomplete dropdown will open with two users shown.
4. Click on one of the items in the dropdown. Nothing happens.

Screenshots, screen recording, code snippet

Environment info

• Firefox 113 and Chrome 113 (yes, the version numbers happen to be the same -- not a typo!)
• Macbook Pro with MacOS 13.3.1

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[ramonjd]

Sorry, I can't replicate this.

I've tested this in WordPress 6.3 (no plugins) and with Gutenberg trunk activated.

I tested using keyboard and mouse, on a local installation of WordPress and also over at https://wordpress.org/gutenberg/

Tested using Firefox 113 and Chrome 112

I would expect https://wordpress.org/gutenberg/ to perhaps not work for this functionality, given that it's a public, erasable instance of Gutenberg, but it seems to regardless 🤷

Are there any more information or test steps that might help to confirm?

[johngodley]

The problem exists for me at https://wordpress.org/gutenberg/ too.

If I use the keyboard the name is inserted. If I use the mouse then nothing happens.

There's no real other steps outside of what is listed above - create a 2x2 table, type @, click on a user with a mouse, and nothing happens.

[17cliu]

@ramonjd Thanks for the quick response!

I noticed in your first screenrecording, the mentions were inserted by using arrow keys + Enter, instead of clicking one of the dropdown items with the mouse.

In the second screenrecording, it's interesting that clicking to insert @admin does work! I wonder why that is. Do the other mock users (I assume they are mock users since they have default avatars) insert correctly if you click on them to insert?

I first discovered this issue on a P2 blog, while authoring a post in wp-admin. It's reproducible with both the @ mentions dropdown, and the # tag dropdown. I was also able to reproduce this issue last night by opening a tag dropdown with # on https://pl9v09-3000.csb.app/ (the sandbox for #50168), but the sandbox isn't working for me right now so I can't get you a screenrecording.

[ramonjd]

I noticed in your first screenrecording, the mentions were inserted by using arrow keys + Enter, instead of clicking one of the dropdown items with the mouse.

I did try both, just happened to record when I was randomly bashing my keyboard 🤣

In the second screenrecording, it's interesting that clicking to insert @admin does work! I wonder why that is. Do the other mock users (I assume they are mock users since they have default avatars) insert correctly if you click on them to insert

I added users to a site to test so in that sense, they were test users, but no "mock". All the users I created I was able to add.

I first discovered this issue on a P2 blog, while authoring a post in wp-admin. It's reproducible with both the @ mentions dropdown, and the # tag dropdown.

This is strange. I don't have an explanation, sorry! cc @youknowriad, who I believe wrote the autocomplete component, just in case he has any quick insights 🙇

[github-actions]

Help us move this issue forward. This issue is being marked stale since it has no activity after 15 days of requesting more information. Please add info requested so we can help move the issue forward. Note: The triage policy is to close stale issues that need more info and no response after 2 weeks.

[17cliu]

I'm not sure what other information I can provide 😕 I can confirm it's still happening for me.

I'm inclined to think this issue comes from the wp components autocomplete package, rather than the specific user autocomplete component (linked in the previous comment), since it happens with the tag autocomplete too.

[github-actions]

Help us move this issue forward. This issue is being marked stale since it has no activity after 15 days of requesting more information. Please add info requested so we can help move the issue forward. Note: The triage policy is to close stale issues that need more info and no response after 2 weeks.

[ellatrix]

I can reproduce, added to my list.