e.setCustomValidity() is not a function -- non-native input elements

[jviall]

Version Number

7.44.2

Codesandbox/Expo snack

https://codesandbox.io/s/rhf-native-validation-w-zod--downshift-select-qwj82y

Steps to reproduce

1. Implement a controlled input that does not use a native form element, and assign its ref from RHF's useController().field
2. set shouldUseNativeValidation to true
3. write a validation rule for the input
4. Submit the form to run validation

Behavior:
e.setCustomValidation() is not a function

Expected behaviour

I'd expect that simply nothing happens in this case. It feels like a valid use case to want to use native validation for inputs that can support it, and for ones that cannot that it is simply skipped.

It seems like the issue could be fixed by adding a check for the presence of e.setCustomValidity before calling it here: https://github.com/react-hook-form/react-hook-form/blob/a4be81f842ab31decf34cc4c5f4fa2ebf2d74c12/src/useController.ts#LL147-L148

If you're open to a PR, I can put one up!

Aside from this, I'm also working to see how I can modify Downshift's recommended implementation of their useSelect hook to include a native input field so that this can work :)

What browsers are you seeing the problem on?

Chrome

Relevant log output

Uncaught (in promise) TypeError: e.setCustomValidity is not a function
    at Object.setCustomValidity (index.cjs.js:1:4509)
    at e (resolvers.js:1:198)
    at t (resolvers.js:1:342)
    at i (resolvers.js:1:431)
    at exports.toNestError (resolvers.js:1:500)
    at eval (zod.js:1:1064)
    at async eval (index.cjs.js:1:18223)

Code of Conduct

• I agree to follow this project's Code of Conduct

[bluebill1049]

I don't think this will work if you applied to a div instead of input reference

[jviall]

I don't think this will work if you applied to a div instead of input reference

@bluebill1049 Correct, that's why the error e.setCustomValidity is not a function occurs. But there are many use cases for having a controlled input in a form that doesn't have a real input reference. I don't think that the form should break in these cases.

In my codesandbox, there are two other native inputs. When shouldUseNativeValidation is true, I would expect that it works for the fields that have an input reference, but if during validation RHF finds a reference to something that isn't an input, it should just skip calling e.setCustomValidity. I don't think it makes sense to always assume that .setCustomValidity is a valid function on every ref.

[jviall]

I think this will work if we simply checked for setCustomValidity() and reportValidity() on the ref before calling them, like this:

setCustomValidity: (message: string) => elm.setCustomValidity?.(message),
reportValidity: () => elm.reportValidity?.(),

react-hook-form/src/useController.ts

Lines 147 to 149 in a4be81f

	setCustomValidity: (message: string) =>
	elm.setCustomValidity(message),
	reportValidity: () => elm.reportValidity(),

[bluebill1049]

I think this will work if we simply checked for setCustomValidity() and reportValidity() on the ref before calling them, like this:

setCustomValidity: (message: string) => elm.setCustomValidity?.(message),
reportValidity: () => elm.reportValidity?.(),

react-hook-form/src/useController.ts

Lines 147 to 149 in a4be81f

	setCustomValidity: (message: string) =>
	elm.setCustomValidity(message),
	reportValidity: () => elm.reportValidity(),

Yes, we can do that, but it's pretty much trying to shallow the error, the question is why should we support non-input elements in the first place? This would probably create inconsistent and unexpected behavior. If it's not going to work, it's probably better to throw an error early than ship it to production.

[leapful]

@jviall

If you really want to use native validation with a non native input element, like div element, you can apply duck typing for the div element with the required methods.

For example:

elem.setCustomValidity = elem.setCustomValidity || noop;
elem.reportValidity = elem.reportValidity || noop;

Working demo: https://codesandbox.io/s/rhf-native-validation-w-zod--downshift-select-forked-8wsczg?file=/src/App.tsx

[jviall]

thanks @leapful, this is a helpful workaround