Heredé un código que usa controles MUI v5 en un formulario creado con react-hook-form v6. Hay algunos controles de autocompletar donde quiero que la selección en un control actualice el valor de otro (por defecto, el usuario siempre puede cambiarlo).

Escuchar los cambios de autocompletar con watch() y luego llamar a setValue() en otro control funciona para actualizar los datos del formulario, pero el inputValue del widget de autocompletar no se actualiza visiblemente. Por lo que el usuario puede ver, nada ha cambiado en el segundo autocompletado, a pesar de que los datos que se devuelven en onSubmit() se han actualizado.

Intenté pasar inputValue como accesorio a <Autocomplete> , pero dado que está siendo controlado por react-hook-form , eso genera un error sobre el cambio del control de no controlado a controlado.

Este codesandbox demuestra el problema . Seleccionar "first" en el autocompletado de thing1 debería actualizar thing2 a "last" . Si hace clic en Enviar , los datos del formulario se registrarán en la consola, mostrando que thing2 se ha actualizado. Pero la interfaz de usuario visible no cambia.

Actualizar

Como suele suceder cuando se trata de explicar un error, se me ocurrió una solución. Intenté llamar a register() con un nombre diferente en <Autocomplete> . Esto provocó que el segundo autocompletado se actualizara correctamente cuando se llamó a setValue() , pero agregó algunos campos innecesarios a los datos de envío. Luego eliminé por completo la llamada a register() (que ya estaba allí cuando comencé a mirar el código). Supongo que registrar un componente si ya es hijo de un <Controller> es innecesario, y tal vez confunda las cosas. (¿Tal vez la biblioteca debería arrojar un error en ese caso?)

El componente personalizado de trabajo que envuelve <Autocomplete> en un <Controller> se ve así:

 const ControlledAC = ({ name, control, register, options }) => ( <Controller name={name} control={control} render={(props) => ( <Autocomplete {...props} freeSolo autoSelect options={options} onChange={(_, value) => props.onChange(value)} renderInput={(params) => <TextField {...params} label={name} />} /> )} /> );

Sin embargo, esta interacción entre MUI y react-hook-form parece un poco mágica. ¿Es este el derecho de establecer mediante programación un valor en un componente <Autocomplete> ?