react-hook-form。 useFieldArray Controller 必填，报错自动获取较多疑问记录

背景

动态多个数据Controller包裹时候，原生html标签input可以add时候自动获取焦点，聚焦到最近不符合要求的元素上面

• matiral的TextField同样可以
• 可是x-date-pickers/DatePicker不可以❌

是什么原因呢，内部提供foucs？？属性才可以，还是？

暂时记录下，问题还未解决

input图：

input代码：

直接用controller的field，add时候就可以给最前面一个没有有效输入的input获取焦点

TextField图：

TestField代码：

必须用register，controller的field无效（没有add自动获取最前面无效输入的表单）

x-data-picker

用controller的fields或者regiter都无效

完整代码

import { useForm, Controller, useFieldArray } from "react-hook-form";
import { TextField } from "@mui/material";
import { useEffect } from "react"
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
function Form() {
    const { register, setFocus, control, handleSubmit, formState: { errors, isDirty }, formState } = useForm();
    const { fields, append, prepend, remove, swap, move, insert } = useFieldArray({
        control, // control props comes from useForm (optional: if you are using FormContext)
        name: "test", // unique name for your Field Array
        defaultValue: {
            test: [
                {
                    value: 100
                }
            ]
        }
    });

    const onSubmit = (data) => {
        console.log("data", data);
    };
    // console.log("errors", errors)
    useEffect(() => {
        // const firstError = Object.keys(errors).reduce((field, a) => {
        //     return !!errors[field] ? field : a;
        // }, null);
        // console.log("firstError", firstError)
        // if (firstError) {
        //     setFocus(firstError);
        // }
        // console.log("errors.test[0]", formState.errors)
        // if (errors.test && errors.test[0]?.value?.ref) {
        //     console.log(" errors.test[0].value.ref", errors.test[0].value.ref)
        //     //errors.test[0].value.ref.focus()
        //     setFocus(`test.${0}.value`)
        // }

    }, [errors, formState]);
    const appendfile = () => {
        append({
            value: ""
        })
    }

    return (
        

            
{String(isDirty)}
            {fields.map((field, index) => (
                

                    {/*  */}

                    {/*  */}


                     {
                            console.log("field", field)
                            //     required: {
                            //         value: true,
                            //         message: "required"
                            //     }
                            // }))

                            return (
                                //一，可以自动获取焦点

                                // 
                                //二，可以自动获取焦点
                                // 
                                //三，可以自动获取焦点
                                // < LocalizationProvider dateAdapter={AdapterDayjs} >
                                //     
                                // 
                            )
                        }}
                    />


                
            ))}
            

                add
            

            

                
            
        
    );
}

export default Form;

append 后不自动focus

lib版本：7.47.0 ，一下代码window 谷歌可行，苹果谷歌不可行

append({
            value: "",
            time: null
        }, {
            shouldFocus: false,
})

isduty在提交后，依旧是true，如何解决：

 React.useEffect(() => {
    if (isSubmitted) {
      reset({}, { keepValues: true });
    }
  }, [isSubmitted, reset]);

代码：React Hook Form - useForm Template (forked) - CodeSandbox

注意必须通过handleSubmit(handler) handleSubmit函数来包裹提交函数

参考：

isDirty is not set to false after successful submission · Issue #3097 · react-hook-form/react-hook-form · GitHub