Fix isEmpty check in validateField for custom field components

src/__tests__/logic/validateFieldArrayState.test.tsx

@@ -0,0 +1,40 @@
+import validateField from '../../logic/validateField';
+import * as isHTMLElement from '../../utils/isHTMLElement';
+
+jest.mock('../../utils/isHTMLElement', () => ({
+  __esModule: true,
+  default: jest.fn(),
+}));
+
+describe('validateField', () => {
+  it('should not detect isEmpty when handling a custom built select', async () => {
+    jest.spyOn(isHTMLElement, 'default').mockImplementation(() => {
+      return true;
+    });
+
+    /**
+     * With a custom built select component it can happen that the
+     * referenced element does not have a value attribute.
+     * But the state is correctly set at the moment of validation.
+     */
+    expect(
+      await validateField(
+        {
+          _f: {
+            mount: true,
+            name: 'test',
+            ref: { value: '', name: 'test' },
+            required: true,
+          },
+        },
+        {
+          test: [
+            { label: 'Blackberry', value: 'blackberry' },
+            { label: 'Banana', value: 'banana' },
+          ],
+        },
+        false,
+      ),
+    ).toEqual({});
+  });
+});

src/logic/validateField.ts

@@ -15,7 +15,6 @@ import isCheckBoxInput from '../utils/isCheckBoxInput';
 import isEmptyObject from '../utils/isEmptyObject';
 import isFileInput from '../utils/isFileInput';
 import isFunction from '../utils/isFunction';
-import isHTMLElement from '../utils/isHTMLElement';
 import isMessage from '../utils/isMessage';
 import isNullOrUndefined from '../utils/isNullOrUndefined';
 import isObject from '../utils/isObject';
@@ -67,13 +66,18 @@ export default async <T extends FieldValues>(
   const isRadio = isRadioInput(ref);
   const isCheckBox = isCheckBoxInput(ref);
   const isRadioOrCheckbox = isRadio || isCheckBox;
+  const isInputValueEmpty =
+    isUndefined(inputValue) ||
+    inputValue === null ||
+    inputValue === '' ||
+    (Array.isArray(inputValue) && !inputValue.length);
+
   const isEmpty =
     ((valueAsNumber || isFileInput(ref)) &&
       isUndefined(ref.value) &&
       isUndefined(inputValue)) ||
-    (isHTMLElement(ref) && ref.value === '') ||
-    inputValue === '' ||
-    (Array.isArray(inputValue) && !inputValue.length);
+    isInputValueEmpty;
+
   const appendErrorsCurry = appendErrors.bind(
     null,
     name,