[React] Formulário só obtém valores de input após o segundo envio

Criei um formulário utilizando o react-hook-form, nele uso diferentes tipos de inputs. Nos inputs onde o valor é alterado a partir do acionamento do evento onChange junto ao useState, o formulário absorve esse valor no primeiro envio, nos inputs onde o valor é alterado a partir do evento onClick, esse valor só é absorvido pelo formulário após o segundo envio do mesmo. Aqui está o código do input que está gerando o problema:

"use client"

import useClickOutside from '@/app/hooks/useClickOutside';
import React, { ChangeEvent, useEffect, useRef } from 'react';
import { useState } from "react"
import { useFormContext } from 'react-hook-form';
import { IoMdClose } from 'react-icons/io';

type Props = {
input_name: string,
label_name: string,
form_name: string,
center_text: boolean,
error_message: string | undefined,
opcoes: string[],
width?: number
}

export default function Select(props: Props) {

const { register } = useFormContext()

const [value, setValue] = useState<string>("")

const setInputValue = (e: React.MouseEvent<HTMLLIElement, MouseEvent>) => {
setValue(e.currentTarget.innerText)
setUlVisibility(false)
return e
}

const handleChange = (e: ChangeEvent<HTMLInputElement>) => {

setValue(e.currentTarget.value)
}

const [ulVisibility, setUlVisibility] = useState(false)

const div_ul_ref = useRef<HTMLDivElement>(null);
useClickOutside(div_ul_ref, () => setUlVisibility(false))

// Lançar aqui quaisquer operações que dependam da alteração do "value"
useEffect(() => {
register(props.input_name, { value: value })
}, [value])

return (
<div className={`flex flex-col relative ml-4 flex-auto`} style={{ width: `${props.width == null ? 60 : props.width}px` }}>
<label htmlFor={props.input_name} className="absolute -top-2.5 mx-2 px-2 w-fit text-xs bg-c-terciary text-t-terciary">{props.label_name}:</label>
<input {...register(props.input_name)} onChange={handleChange} onClick={() => { setUlVisibility(!ulVisibility) }} form={props.form_name} type="text" value={value} className={`px-[11px] py-[11px] border-solid rounded-xl border border-c-primary focusutline-none text-sm ${props.center_text ? 'text-center' : ''}`} />
<IoMdClose className={`${value == "" ? 'hidden' : 'block'} absolute top-3 w-5 h-5 right-3 cursor-pointer`} onClick={() => setValue("")} />
<span className={`text-xs pl-2 ${props.error_message != undefined ? 'text-t-terciary' : 'text-transparent select-none'}`}>{props.error_message != undefined ? props.error_message : 'Placeholder'}</span>
<div ref={div_ul_ref} className={`${ulVisibility ? 'block' : 'hidden'} block z-10 absolute flex-1 overflow-y-scroll h-fit max-h-48 mt-12 bg-white w-full border-solid rounded-xl border border-c-primary text-t-secondary`}>
<ul>
{props.opcoes.map((opcao, index) => (
<li key={index} onClick={(setInputValue)} className="text-sm p-2 w-full hover:bg-c-secondary first:rounded-t-xl last:rounded-b-xl cursor-default">{opcao}</li>
))}
</ul>
</div>
</div>
)
}


Assim que eu clico numa das opções, automaticamente o valor do input é alterado corretamente, sinal de que a linha "setValue(e.currentTarget.innerText)" já alterou o valor de "value", mas quando envio o formulário ele não recebe esse valor, a não ser que eu clique no botão de enviar outra vez. Nada disso acontece nos inputs cujo valor é alterado através do acionamento do onChange. Não entendo por que o formulário não recebe o valor de "value" já no primeiro envio.

Continue reading...