T
TanStack•5w ago
other-emerald

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, 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,
    });
  }}
1 Reply
wise-white
wise-white•5w ago
sounds like some controlled vs uncontrolled input issue can you please provide a complete minimal example, ideally by forking one of the existing router stackblitz examples?

Did you find this page helpful?