Skip to content

Cursor jumps when using useSearch state to controll input #6620

@nizans

Description

@nizans

Which project does this relate to?

Router

Describe the bug

When controlling an with state derived from useSearch, the cursor position resets to the end on every render. This makes it impossible to edit text in the middle of the input.

This does not reproduce when reading the same search state via useLocation (and selecting the search from it) — in that case the cursor remains stable.

This looks very similar to the previously reported issue in #3162.
That issue seems to have been resolved at some point, but the behavior reproduces again on ^1.158.0.

Your Example Website or App

https://stackblitz.com/~/github.com/nizans/tanstack-router-cursor-jump

Steps to Reproduce the Bug or Issue

  1. Go to https://stackblitz.com/~/github.com/nizans/tanstack-router-cursor-jump
  2. Type in the first input (the one controlled via useSearch)
  3. Cursor jumps to the end after each change

Expected behavior

The cursor should remain stable while editing, similar to a regular controlled input using React useState. Using useSearch to derive the value should not cause cursor resets.

Screenshots or Videos

No response

Platform

  • Router / Start Version: [e.g. ^1.158.0]
  • OS: macOS
  • Browser: Chrome
  • Bundler: vite
  • Bundler Version: 7.0.0

Additional context

In the previous discussion (#3162) theres seems to be a PR with a fix that was never merged: #3174.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions