reset form and doing a focus on an input is problematic

[behivetech]

So, not sure if this might be considered a bug or not, but just thought I'd post it here for a little discussion on it first. This hung me up for a bit. I thought there was a problem going on with my component when trying to do a focus on it, but it turns out if you use the reset function from useForm just before the focus on the input, something is happening to make it lose focus asynchronously. Once I was able to figure out that was going on I just threw an await on reset to be sure it was done to do the focus, but should there be something to prevent that or at least some sort of documentation so this doesn't hang someone else up? Here's my code for the specific areas...

    const {register: fieldRegister, handleSubmit, errors: fieldErrors, reset} = useForm();
    const nameInputRef = useRef(null);

    useEffect(() => {
        if (!addItemLoading && addItemCalled && nameInputRef.current.value) {
            // Need to make sure reset is finished before focussing because the
            // field loses focus for some reason if reset is doing things.
            const resetForm = async () => await reset();

            resetForm();
            nameInputRef.current.focus();
        }
    }, [addItemCalled, addItemLoading, nameInputRef, reset]);

    function handleInputRef(node) {
        nameInputRef.current = node;
        fieldRegister(node, {required: 'This field is required'});
    }

    // ... other code

    <TextField
        className={getClass('field')}
        disabled={formDisabled}
        fieldError={fieldErrors.name}
        fullWidth
        id="name"
        inputRef={handleInputRef}
        label="Add Item"
        name="name"
    />

[bluebill1049]

hey @Bruqui as far as I know, we don't do anything async in reset, but this could be the reason why you are having an issue:

https://github.com/react-hook-form/react-hook-form/blob/master/src/useForm.ts#L1114

we do invoke native form reset API.

[bluebill1049]

I will take a look at it when i got a chance. thanks.

[rimzzlabs]

hey, how's it going?

[ScreamZ]

Hello @bluebill1049,

As stated here https://react-hook-form.com/docs/useform/setfocus

Avoid calling setFocus right after reset as all input references will be removed by reset API.

Do you have any recommendations to achieve this? For a chat I need to reset the form field of the text input, reset eventual errors and keep focus on the field while submitting to avoid losing the mobile device keyboard.

Thanks

[rimzzlabs]

@ScreamZ you can try this method

async function onSubmit(){
 // rest of the code
 form.resetField('message', { defaultValue: "" } )
 form.setFocus('message')
}

[ScreamZ]

@rimzzlabs Thank, Confirmed workaround