React - Making a Private route makes form input lose focus on each keystroke

Help
, ,
1

Hey ya’ll. Junior Dev here, so apologies ahead of time :slight_smile:

I’m using react router with a custom wizard form. Each form page has it’s own context for the state object gathered from the inputs. Everything was working great.

I implemented Auth0 yesterday, and followed the recent SDK. I’m able to authenticate successfully, grab user data, and use the forms as before no problem with the exisiting routes.

I made the PrivateRoute HOC as described in the new blogpost. The redirect to Auth0 login works perfectly when you hit that route, but once authenticated, the form no longer works as expected.

It seems like something is re-rendering and the focus is thrown off the input field you are typing in. Any thoughts on why the input may be going out of focus once it is routed as a PrivateRoute ?

2

Looks like wrapping the component export with withAuthenticationRequired(Component) fixes the issue.

For whatever reason changing my routing with PrivateRoute through the HOC laid out in the recent blog post broke my forms.

1 Like
3

Glad it’s working for you now and thanks for sharing with the rest of community!

4

Thanks Konrad,

Any ideas on why wrapping the component export works, but changing the Route to a PrivateRoute through the HOC as laid out in the recent blog post doesn’t?

5

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.