TanStack / TanStack/router

Cursor jumps when using useSearch state to controll input

Open
#6,620 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
15.1k
Forks
1.9k
Avg merge
1d 20h
Merged PRs (30d)
143

Description

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 https://github.com/TanStack/router/issues/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: https://github.com/TanStack/router/pull/3174.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the behavior in the linked StackBlitz app, comparing the input controlled through useSearch with the one using useLocation and selected search state. Start by tracing the useSearch entry point and compare it with the behavior discussed in issues #3162 and PR #3174; done means the controlled input cursor remains stable while editing.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.