Input loses focus on first render when using navigate

Hey everyone! I have an input that sets a query parameter in the URL using

useNavigate

useNavigate

, this works pretty good, however there is one use case where the input loses focus when the page is rendered for the first time and the user types one character.

Is there a way to avoid this problem? This is what I am doing:

<TextFilter
  label={t`Full Name`}
  placeholder={t`Search by full name`}
  value={fullName}
  onChange={value => {
    navigate({
      search: old => ({ ...old, page: 0, fullName: value }),
      replace: true,
    });
  }}

<TextFilter
  label={t`Full Name`}
  placeholder={t`Search by full name`}
  value={fullName}
  onChange={value => {
    navigate({
      search: old => ({ ...old, page: 0, fullName: value }),
      replace: true,
    });
  }}

TanStack•6mo ago•

2 replies

worthy-rose

Input loses focus on first render when using navigate

Hey everyone! I have an input that sets a query parameter in the URL using

useNavigate

useNavigate

<TextFilter
  label={t`Full Name`}
  placeholder={t`Search by full name`}
  value={fullName}
  onChange={value => {
    navigate({
      search: old => ({ ...old, page: 0, fullName: value }),
      replace: true,
    });
  }}

<TextFilter
  label={t`Full Name`}
  placeholder={t`Search by full name`}
  value={fullName}
  onChange={value => {
    navigate({
      search: old => ({ ...old, page: 0, fullName: value }),
      replace: true,
    });
  }}

Input loses focus on first render when using navigate

Similar Threads

Input loses focus on first render when using navigate

Similar Threads

Similar Threads

Similar Threads