Mentions autocomplete is unstable

[WunderBart]

Description

Mentions autocomplete feature is unstable when using multiple completers in a single block.

Related: #47916

Expected behavior:

Results popup is shown on each keypress if the results aren't empty.

Actual behavior:

For the second inline mention, the results popup sometimes doesn't appear or disappears randomly.

---

Side comment:

It's not breaking anything, but I noticed that the results popup is constantly refreshing, which is triggering many requests. This is especially noticeable when, for example, navigating the results. Might be worth looking into for some optimization? In the attached video you can see the network tab being flooded when using the autocomplete.

Step-by-step reproduction instructions

1. create a new post
2. start typing a mention, trigger with the @ char
3. after typing in 2 characters, hit enter to apply the found mention
4. hit space and start typing another mention, this time start with + trigger
5. after typing two characters, if unlucky, the results popup might not show at all,
6. if it's visible, type the third character in
7. see how the results popup disappeared

See the attached video for more information.

Screenshots, screen recording, code snippet

Screen.Recording.2023-10-06.at.11.40.02.mov

Environment info

Gutenberg trunk

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

Yes

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

No

[WunderBart]

The autocomplete spec is still flaky, unfortunately, so maybe we should skip it until this issue is addressed?

cc @kevin940726 @Mamaduka @chad1008

[Mamaduka]

Can we say for sure that it's still flaky? Some branches might not be current and include your e2e test fix.

[WunderBart]

Can we say for sure that it's still flaky? Some branches might not be current and include your e2e test fix.

I assumed it's flaky by looking at this failure, which happened against the recent fix. The trace (attached below) shows the same broken behavior as before (described in this issue).

failures-artifacts.zip

[Mamaduka]

Thanks for the additional context, @WunderBart! In that case, I think it makes sense to skip the test until the underlying issue with Autocompleter is resolved.

[alexstine]

This is also causing issues on Windows for accessibility, the constant re-rendering.

#54902

Not a huge issue but noticeable. Would be great to fix this instead of skipping the tests. This type of refactor is out of what I can do in React though. Is there a follow-up to track this outside of the flaky tests alone?

EDIT: Ignore me. I see the PR is not linked to close this issue. This is the follow-up. 😄

[chad1008]

I took a look at this today and I'm not sure what's causing the issue, but it's also been a while since I've played with Autocomplete, so I'll likely need to dig a bit more to try and unearth anything.

ccing @ellatrix in case anything jumps out for you, it looks like you've worked on autocomplete a little more recently, and it may be fresher in your mind 🙂

[alexstine]

When I initially tested this, it was a much bigger improvement over what was working. Hoping to refine this and make it perfect. 👍 It seems like every time the arrow keys are pressed, the AutocompleteUI re-renders. You can see that in the React Profiler tool. It is caused by the key down event. I could understand it needing to re-render if the options change, but arrow press should not make the options change.

[Kishlol]

Regression

[chad1008]

@Kishlol can you elaborate a bit on that comment? Are you saying you recognize this as a regression related to a specific PR? Or just noting more generally that it's a somewhat recent development?

[WunderBart]

This is also causing issues on Windows for accessibility, the constant re-rendering.

#54902

Not a huge issue but noticeable. Would be great to fix this instead of skipping the tests. This type of refactor is out of what I can do in React though. Is there a follow-up to track this outside of the flaky tests alone?

Here's the dedicated issue for it, @alexstine: #55299

[WunderBart]

The following should fix the autocomplete bug and stabilize the test: #55301