Skip to content

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

Merged
Mamaduka merged 3 commits into
trunkfrom
fix/autocomplete-text-cursor-position-loss
Jul 14, 2025
Merged

Autocomplete: Prevent text cursor position loss when clicking to insert an item#70660
Mamaduka merged 3 commits into
trunkfrom
fix/autocomplete-text-cursor-position-loss

Conversation

@Mamaduka

@Mamaduka Mamaduka commented Jul 9, 2025

Copy link
Copy Markdown
Member

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
@github-actions

github-actions Bot commented Jul 9, 2025

Copy link
Copy Markdown

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

Mamaduka commented Jul 9, 2025

Copy link
Copy Markdown
Member Author

@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
Copy Markdown
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
Copy Markdown
Member Author

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

@github-actions

Copy link
Copy Markdown

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:

@t-hamano t-hamano left a comment

Copy link
Copy Markdown
Contributor

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
Copy Markdown
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