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.

[behivetech]

Strange... Seems like I shouldn't need this, but for some reason, it's losing focus unless I throw that await on it. Anyway, just wanted to throw that out there to see what the thought was on it.

[bluebill1049]

if you can provide a codesandbox, i can do some investigation for you, but yea reset doesn't have any async code, but register does have async code, i think it's probably related to register.

[behivetech]

I'd have to build that out unless you wanted to just check out my repo. It's not a real concern for me at this point since I got it working, but if you're asking if I could build it out to assist with the react-hook-form project, I could find some time to do that if needed. Here's the repo if you have interest...
https://github.com/bruqui/grocery-list

It's fairly small, but keep in mind that it's still a work in progress so a little buggy in areas. The area I had problems with it is in the edit tab and adding an item.

[bluebill1049]

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

[rimzzlabs]

hey, how's it going?