React Hook Form with Prime React Password Component focus on error

Question

When using React Hook Form with Prime React Password Component, if the Password component would throw an error, for example being empty with required set to true, then React Hook Form will throw an error and not be able to focus on the password field.

This only happens if the Password component is the ONLY field in error.

See sandbox - https://codesandbox.io/s/blissful-butterfly-pc6xhk?file=/src/App.js

I have not tested with other Prime React components such as dropdowns, checkbox etc.

I am aware that I could work around this by disabling the submit button until all fields are valid but this is not the preferred operation.

I'm not sure if this is an error with my implementation of the code hence the question here or whether it's underlying in either react-hook-form or prime-react?

score 0 · Accepted Answer · answered Nov 18 '22 at 17:47

Code Sandbox: https://codesandbox.io/s/white-glade-i26wqu?file=/src/App.js

The issue is Password has an inputRef... the main ref points to the wrapper DIV of the password so you need to tell React hook form where the inputRef is so it can focus.

              <Password
                {...field}
                inputRef={field.ref}
                type="password"
                placeholder="password input"
              />

React Hook Form with Prime React Password Component focus on error

1 Answers1