vicious-gold

Search on keystroke

I have the following search field

<div className="relative">
  <Input
     placeholder="Search"
     value={search.searchText}
     onChange={e => navigate({ search: p => ({ ...p, searchText: e.target.value }) })}
   />
   <Search size={20} className="absolute right-3 top-3 text-gray-400" />
</div>

<div className="relative">
  <Input
     placeholder="Search"
     value={search.searchText}
     onChange={e => navigate({ search: p => ({ ...p, searchText: e.target.value }) })}
   />
   <Search size={20} className="absolute right-3 top-3 text-gray-400" />
</div>

Everytime I try to press a key only one keystore gets registered and input get out of focus, probably because of navigate. Is there a way to get this working? Here's the route loader info

export const dashboardRoute = createRoute({
  path: "super-admin/dashboard",
  validateSearch: dashboardSchema.parse,
  loaderDeps: ({ search }) => ({
    page: search.page,
    searchText: search.searchText,
    isAscending: search.isAscending,
    pageSize: search.pageSize
  }),
  getParentRoute: () => protectedRoute,
  loader: async ({ context, deps }) => {
    const response = await context.queryClient.ensureQueryData(
      queryOptions({
        queryKey: ["super-admin/dashboard", deps],
        queryFn: () =>
          axiosInstance(
            `/Admin/GetAllHospitals?PageSize=${deps.pageSize}&PageNo=${deps.page}&SearchText=${deps.searchText}&IsAscending=${deps.isAscending}`
          )
      })
    )

    const data = response.data.result.result.results.map((hospital: Hospital) => ({
      id: hospital.id,
      name: hospital.name,
      address: `${hospital.building ?? ""}, ${hospital.street ?? ""}, ${hospital.town ?? ""}, ${hospital.county ?? ""}, ${hospital.postcode}`,
      code: hospital.code,
      action: (
        <div className="flex cursor-pointer gap-4">
          <UserPlus />
          <View />
          <Pencil />
        </div>
      )
    }))

    return {
      data: data as HospitalTransformed[],
      totalCount: response.data.result.result.totalCount as number
    }
  }
}).lazy(() => import("./Dashboard").then(d => d.Route))

export const dashboardRoute = createRoute({
  path: "super-admin/dashboard",
  validateSearch: dashboardSchema.parse,
  loaderDeps: ({ search }) => ({
    page: search.page,
    searchText: search.searchText,
    isAscending: search.isAscending,
    pageSize: search.pageSize
  }),
  getParentRoute: () => protectedRoute,
  loader: async ({ context, deps }) => {
    const response = await context.queryClient.ensureQueryData(
      queryOptions({
        queryKey: ["super-admin/dashboard", deps],
        queryFn: () =>
          axiosInstance(
            `/Admin/GetAllHospitals?PageSize=${deps.pageSize}&PageNo=${deps.page}&SearchText=${deps.searchText}&IsAscending=${deps.isAscending}`
          )
      })
    )

    const data = response.data.result.result.results.map((hospital: Hospital) => ({
      id: hospital.id,
      name: hospital.name,
      address: `${hospital.building ?? ""}, ${hospital.street ?? ""}, ${hospital.town ?? ""}, ${hospital.county ?? ""}, ${hospital.postcode}`,
      code: hospital.code,
      action: (
        <div className="flex cursor-pointer gap-4">
          <UserPlus />
          <View />
          <Pencil />
        </div>
      )
    }))

    return {
      data: data as HospitalTransformed[],
      totalCount: response.data.result.result.totalCount as number
    }
  }
}).lazy(() => import("./Dashboard").then(d => d.Route))

3 Replies

other-emerald•14mo ago

can you please share a complete minimal example by forking one of the existing router examples on stackblitz? e.g. https://tanstack.com/router/v1/docs/framework/react/examples/quickstart-file-based

React TanStack Router Quickstart File Based Example | TanStack Rout...

An example showing how to implement Quickstart File Based in React using TanStack Router.

fair-rose•14mo ago

I cant get stackblitz working. my question is: can tsr handle a navigation without remounting the entire page? i want fresh data from my loader, i just want my page rerendered, not remounted

fair-rose•14mo ago

I checked out this react kitchen sink, which does sorting and filtering. and the filtering works: https://tanstack.com/router/latest/docs/framework/react/examples/kitchen-sink-react-query-file-based however, the route loader does not use the search values. they are not passed by loaderDeps. and the sorting and filtering is done in the react code. what i think should happen: 1. the loader can read the search params and use them in its query, but changes to the search params dont change the matched route once we are there. 2. subsequent changes to the search values via navigate should keep the same route, but react query should fetch the correct data using the new search params. 3. preloading should still work. 4. so i think i need to make it so that the router works the same as it does today, but it doesn't change routes when i change the search param only (for this page.)

React TanStack Router Kitchen Sink React Query File Based Example |...

An example showing how to implement Kitchen Sink React Query File Based in React using TanStack Router.

Gaming

Programming

Search on keystroke

Did you find this page helpful?