The input field loses focus on each keystroke when using useNavigate to update URL params. Possible bug.

[decipher-cs]

The input tab will register at most one keystroke, after which it will lose focus (possible due to the entire page re-rendering). The input will need to be pressed again to focus and type a new keystroke.

I expected the text in the input as well as the query in the URL to update simultaneously.

type query = { query: string }

export const Route = createFileRoute('/newcomp')({
    component: Search,
    validateSearch: (search: Record<string, unknown>): query => {
        return {
            query: search.query as string,
        }
    },
})

function Search() {
    const { query } = Route.useSearch()

    const navigate = Route.useNavigate()

    const updateQuery = (newStr: string) => {
        navigate({ search: { query: newStr } })
    }


    console.log('re-rendered')

    return (
        <div>
            <input
                value={query}
                onChange={(e) => {
                    updateQuery(e.target.value)
                }}
            />
        </div>
    )
}

I also tried following this post for refernce.

"@tanstack/react-router": "^1.45.6",

A temporary fix is to use the input's onBlur event to navigate({ search: e.target.value }) and update the params but it's very much a workaround.

[decipher-cs]

I believe it's the bug mentioned here #1462 (comment)