🧱 prevent runtime error startsWith called with undefined (#9223)

* 🧱 prevent issue with startsWith called with undefined

* fix tests

* fix build

examples/V7/asyncFieldValidation.tsx

@@ -35,11 +35,7 @@ export default function App() {
 
         <div>
           <label htmlFor="lastName">Last Name</label>
-          <input 
-            id="lastName"
-            placeholder="Luo"
-            {...register('lastName')}
-           />
+          <input id="lastName" placeholder="Luo" {...register('lastName')} />
         </div>
 
         <div>

src/__tests__/logic/focusFieldBy.test.ts

@@ -24,7 +24,7 @@ describe('focusFieldBy', () => {
               type: 'required',
             },
           },
-          key,
+          String(key),
         ),
     );
 
@@ -58,7 +58,7 @@ describe('focusFieldBy', () => {
               type: 'required',
             },
           },
-          key,
+          String(key),
         ),
     );
 
@@ -79,7 +79,7 @@ describe('focusFieldBy', () => {
                 type: 'required',
               },
             },
-            key,
+            String(key),
           ),
       );
     }).not.toThrow();

src/logic/createFormControl.ts

@@ -800,7 +800,7 @@ export function createFormControl<
       !validationResult &&
       focusFieldBy(
         _fields,
-        (key) => get(_formState.errors, key),
+        (key) => key && get(_formState.errors, key),
         name ? fieldNames : _names.mount,
       );
 
@@ -1016,7 +1016,11 @@ export function createFormControl<
 
   const _focusError = () =>
     _options.shouldFocusError &&
-    focusFieldBy(_fields, (key) => get(_formState.errors, key), _names.mount);
+    focusFieldBy(
+      _fields,
+      (key) => key && get(_formState.errors, key),
+      _names.mount,
+    );
 
   const handleSubmit: UseFormHandleSubmit<TFieldValues> =
     (onValid, onInvalid) => async (e) => {

src/logic/focusFieldBy.ts

@@ -4,7 +4,7 @@ import isObject from '../utils/isObject';
 
 const focusFieldBy = (
   fields: FieldRefs,
-  callback: (name: string) => boolean,
+  callback: (name?: string) => boolean,
   fieldsNames?: Set<InternalFieldName> | InternalFieldName[],
 ) => {
   for (const key of fieldsNames || Object.keys(fields)) {

src/useFieldArray.ts

@@ -367,8 +367,9 @@ export function useFieldArray<
     });
 
     control._names.focus &&
-      focusFieldBy(control._fields, (key: string) =>
-        key.startsWith(control._names.focus),
+      focusFieldBy(
+        control._fields,
+        (key) => !!key && key.startsWith(control._names.focus),
       );
 
     control._names.focus = '';