e.focus error for InputNumber, Password

[aleksa98]

Link: https://www.primefaces.org/primereact/reacthookform/
In the VALIDATION section, then React Hook Form.

When I open the form in CodeSandBox, and I start to fill it in order, I first enter my name, then my email, and if I press the submit button, the validation should go to the password field, but then it happens
ERROR: e.focus is not a function.
Which doesn't make sense to me because I didn't change your code.

I would like you to test this, I think the problem is in your Password component, because when I change to InputText everything works normally.
The problem is when I pass all the props from the field {...field}, and then the components don't work: Password, InputNumber, Dropdown

Any help is appreciated

[marciolsa]

Same problem here.

This is how to workaround.

Set to false the shouldFocusError on the useForm hook or
Rollback react-hook-form to 7.36.0 they have made some changes after this version.

https://github.com/react-hook-form/reac ... ssues/9126
Commit: a54394a3f8bbd4f1dfe0c5cba1fe99dbb843a483

To fix it, guys from primereact should change how they forward the element ref.
For example the Password component forward a ref that doesn't have any focus function, only exposes props and some gets.

Code: Select all

React.useImperativeHandle(ref, () => ({
            props,
            getElement: () => elementRef.current,
            getOverlay: () => overlayRef.current,
            getInput: () => inputRef.current
        }));

Or the react-hook-form should fix it. Don't know...

[Melloware]

No you don't need to do that you need to use ` inputRef={field.ref}` on Password and InputNumber like this and React Hook Form works fine.

See Here is a working Code Sandbox: https://codesandbox.io/s/white-glade-i2 ... :4459-4626

Code: Select all

<Controller
                                name="password"
                                control={form.control}
                                rules={{ required: 'Password is required.' }}
                                render={({ field, fieldState }) => (
                                    <>
                                        <label htmlFor={field.name} className={classNames({ 'p-error': errors.password })}>
                                            Password*
                                        </label>
                                        <Password id={field.name} {...field} inputRef={field.ref} className={classNames({ 'p-invalid': fieldState.error })} feedback={false} />
                                        {getFormErrorMessage(field.name)}
                                    </>
                                )}
                            />

[marciolsa]

Good!
Could you please take a look on SelectButton? I couldn't manage to make it work.

I've added it to same example.

https://codesandbox.io/s/cocky-brahmagu ... src/App.js

[Melloware]

OK I opened a ticket for SelectButton: https://github.com/primefaces/primereact/issues/3790