conscious-sapphire

Input box dynamically changing search params with out losing focus

My current implementation is causing a re-render of my input box on each key I type into the input box causing me to lose focus on that input box. Is there a pattern I can use to keep focus but still update my search params as I type.

15 Replies

correct-apricot•8mo ago

please provide a complete minimal example

conscious-sapphireOP•8mo ago

const searchSearchSchema = z.object({
  searchTerm: z.string().catch(''),
});

export const Route = createFileRoute('/search')({
  component: Search,
  validateSearch: zodValidator(searchSearchSchema),
  search: {
    middlewares: [stripSearchParams(searchSearchSchema.parse({}))],
  },
});

export function Search() {
  
    const { searchTerm  } = Route.useSearch();

return (
          <input
            value={searchTerm}
            onChange={(e) => {
              navigate({
                to: '.',
                search: { searchTerm: e.target.value },
              });
            }
          />
  );
}

const searchSearchSchema = z.object({
  searchTerm: z.string().catch(''),
});

export const Route = createFileRoute('/search')({
  component: Search,
  validateSearch: zodValidator(searchSearchSchema),
  search: {
    middlewares: [stripSearchParams(searchSearchSchema.parse({}))],
  },
});

export function Search() {
  
    const { searchTerm  } = Route.useSearch();

return (
          <input
            value={searchTerm}
            onChange={(e) => {
              navigate({
                to: '.',
                search: { searchTerm: e.target.value },
              });
            }
          />
  );
}

Let me know if it's not clear from the example. Thanks in advance 🙏

correct-apricot•8mo ago

cant reproduce

correct-apricot•8mo ago

https://stackblitz.com/edit/tanstack-router-x89wu6da?file=src%2Froutes%2Fsearch.tsx&preset=node

Manuel Schiller

StackBlitz

Router Kitchen Sink File Based Example (forked) - StackBlitz

Run official live example code for Router Kitchen Sink File Based, created by Tanstack on StackBlitz

correct-apricot•8mo ago

doesnt lose focus

stormy-gold•8mo ago

Is using the navigate function here going rerender the whole app, because it's happing for me

correct-apricot•8mo ago

where?

stormy-gold•8mo ago

I mean, If I am using navigate({to: ".", search: ...}) on input change, is that supposed to rerender the whole app?

correct-apricot•8mo ago

no it will rerender all components that are subscriber to router state that changes during said navigation

stormy-gold•8mo ago

How do I know if a component is subscribing to the state ? e.x the pagination is an isolated component but its being rerendered, I guess the main Route is doing that, that's why childrens are rerendering too.

correct-apricot•8mo ago

are you using some hook from router there? like useRouterState

stormy-gold•8mo ago

Nope, I added a debounce mechanism now, do you think the complete rerender is weird, I mean since the url is change it makes sens to rerender the parent Route ?

correct-apricot•8mo ago

give me a reproducer , otherwise no idea

stormy-gold•8mo ago

Oh, I think I found why, beacuse Im using Route.useLoaderData(); and that's why the whole Route is rerendering

future-harlequin•6mo ago

I have a same problem

Gaming

Programming

Input box dynamically changing search params with out losing focus

Did you find this page helpful?