Skip to content

Autocomplete: Prevent text cursor position loss when clicking to insert an item #70660

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jul 14, 2025

Conversation

Mamaduka
Copy link
Member

@Mamaduka Mamaduka commented Jul 9, 2025

What?

Fixes #50168.

PR fixes text cursor position loss when clicking the autocomplete suggestion item and allows users to continue typing after selection.

Why?

The behavior works correctly when using the keyboard; it should function similarly after a click interaction.

How?

Prevent the button from "stealing" focus during the click event and let RichText restore the text cursor position.

Ensure that the content receives focus back after selection.

Testing Instructions

  1. Create a post.
  2. Add a paragraph block.
  3. Type the @ symbol.
  4. Select a user by clicking on the suggested item.
  5. Confirm that you can continue typing after inserting the item.

Testing Instructions for Keyboard

Same.

Screenshots or screencast

CleanShot.2025-07-09.at.14.34.35.mp4

@Mamaduka Mamaduka self-assigned this Jul 9, 2025
@Mamaduka Mamaduka added the [Type] Bug An existing feature does not function as intended label Jul 9, 2025
@Mamaduka Mamaduka requested a review from ajitbohra as a code owner July 9, 2025 09:49
@Mamaduka Mamaduka added [Feature] Inserter The main way to insert blocks using the + button in the editing interface [Feature] Rich Text Related to the Rich Text component that allows developers to render a contenteditable labels Jul 9, 2025
Copy link

github-actions bot commented Jul 9, 2025

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
Co-authored-by: sandymcfadden <ourvalley@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@Mamaduka Mamaduka added the [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). label Jul 9, 2025
@Mamaduka
Copy link
Member Author

Mamaduka commented Jul 9, 2025

@ellatrix, I would appreciate your feedback regarding this "naive" solution.

@Mamaduka Mamaduka requested review from a team and t-hamano July 9, 2025 13:57
@t-hamano
Copy link
Contributor

Another approach would be to explicitly return the focus, but what do you think?

diff --git a/packages/components/src/autocomplete/index.tsx b/packages/components/src/autocomplete/index.tsx
index d13d1d9b6a..ebd3d92755 100644
--- a/packages/components/src/autocomplete/index.tsx
+++ b/packages/components/src/autocomplete/index.tsx
@@ -126,6 +126,10 @@ export function useAutocomplete( {
                // Reset autocomplete state after insertion rather than before
                // so insertion events don't cause the completion menu to redisplay.
                reset();
+
+               if ( contentRef.current ) {
+                       contentRef.current.focus();
+               }
        }
 
        function reset() {

@Mamaduka Mamaduka force-pushed the fix/autocomplete-text-cursor-position-loss branch from b10357a to 0ec5682 Compare July 14, 2025 04:26
@Mamaduka
Copy link
Member Author

Good call, @t-hamano! I like this explicit solution more.

Copy link

Flaky tests detected in 0ec5682.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/16257939190
📝 Reported issues:

Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! I know that the failing unit tests are not related to this PR.

@Mamaduka Mamaduka merged commit 66093d8 into trunk Jul 14, 2025
85 of 157 checks passed
@Mamaduka Mamaduka deleted the fix/autocomplete-text-cursor-position-loss branch July 14, 2025 07:40
@github-actions github-actions bot added this to the Gutenberg 21.3 milestone Jul 14, 2025
@ellatrix
Copy link
Member

Restoring focus is the correct solution for restoring the selection 👍

cbravobernal pushed a commit that referenced this pull request Jul 15, 2025
…rt an item (#70660)

Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
Co-authored-by: sandymcfadden <ourvalley@git.wordpress.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Inserter The main way to insert blocks using the + button in the editing interface [Feature] Rich Text Related to the Rich Text component that allows developers to render a contenteditable [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Autocomplete: Cursor position lost when clicking to insert item
3 participants