Cursor jumps when using useSearch state to controll input
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
- Go to https://stackblitz.com/~/github.com/nizans/tanstack-router-cursor-jump
- Type in the first input (the one controlled via
useSearch) - 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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