Add test case for cursor resetting to the end of inputs

e2e/react-router/basic/src/main.tsx

@@ -7,6 +7,7 @@ import {
   createRootRoute,
   createRoute,
   createRouter,
+  useNavigate,
 } from '@tanstack/react-router'
 import { TanStackRouterDevtools } from '@tanstack/router-devtools'
 import { NotFoundError, fetchPost, fetchPosts } from './posts'
@@ -59,6 +60,15 @@ function RootComponent() {
         >
           Layout
         </Link>{' '}
+        <Link
+          to="/search-param-binding"
+          search={{}}
+          activeProps={{
+            className: 'font-bold',
+          }}
+        >
+          Search Param Binding
+        </Link>{' '}
         <Link
           // @ts-expect-error
           to="/this-route-does-not-exist"
@@ -204,11 +214,43 @@ function LayoutBComponent() {
   return <div>I'm layout B!</div>
 }
 
+const searchParamBindingRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/search-param-binding',
+  component: SearchParamBindingComponent,
+  validateSearch: (input): { filter?: string } => {
+    return {
+      filter: typeof input.filter === 'string' ? input.filter : undefined,
+    }
+  },
+})
+
+function SearchParamBindingComponent() {
+  const navigate = useNavigate()
+  const { filter } = searchParamBindingRoute.useSearch()
+
+  return (
+    <div>
+      <input
+        data-testid="filter"
+        value={filter}
+        onChange={(e) =>
+          navigate({
+            to: '.',
+            search: { filter: e.target.value },
+          })
+        }
+      />
+    </div>
+  )
+}
+
 const routeTree = rootRoute.addChildren([
   postsRoute.addChildren([postRoute, postsIndexRoute]),
   layoutRoute.addChildren([
     layout2Route.addChildren([layoutARoute, layoutBRoute]),
   ]),
+  searchParamBindingRoute,
   indexRoute,
 ])
 

e2e/react-router/basic/tests/app.spec.ts

@@ -45,3 +45,33 @@ test('Navigating to a post page with viewTransition types', async ({
   await page.getByRole('link', { name: 'sunt aut facere repe' }).click()
   await expect(page.getByRole('heading')).toContainText('sunt aut facere')
 })
+
+test('#3162 - Binding an input to search params with stable cursor position', async ({
+  page,
+}) => {
+  await page
+    .getByRole('link', { name: 'Search Param Binding', exact: true })
+    .click()
+  expect(page).toHaveURL(/.*\/search-param-binding/)
+
+  await page.getByTestId('filter').fill('Hello World')
+  expect(page.getByTestId('filter')).toHaveValue('Hello World')
+  expect(page).toHaveURL(/.*\/search-param-binding\?filter=Hello%20World/)
+
+  await page.getByTestId('filter').click()
+  for (let i = 0; i < 5; i++) {
+    await page.keyboard.press('ArrowLeft')
+  }
+  await page.keyboard.press('Space')
+  await page.keyboard.press('H')
+  await page.keyboard.press('A')
+  await page.keyboard.press('P')
+  await page.keyboard.press('P')
+  await page.keyboard.press('Y')
+  await page.getByTestId('filter').blur()
+
+  expect(page.getByTestId('filter')).toHaveValue('Hello Happy World')
+  expect(page).toHaveURL(
+    /.*\/search-param-binding\?filter=Hello%20Happy%20World/,
+  )
+})