EDICIÓN FINAL: ¡Terminé encontrando una solución y actualicé mi sandbox con ella!
EDITAR: He determinado que se debe a esta línea en el autocompletar...
isOptionEqualToValue={(option, value) => option.id === value.id}Sin embargo, si trato de cambiarlo a esto...
isOptionEqualToValue={(option, value) => option.label === value.label}Me sale el siguiente error en la consola...
useAutocomplete.js:219 MUI: el valor proporcionado para Autocompletar no es válido. Ninguna de las opciones coincide con
"Lisinopril". Puede usar la propiedadisOptionEqualToValuepara personalizar la prueba de igualdad.
Creé el siguiente formulario usando Material UI y React Hook Form...
https://codesandbox.io/s/inputquestion-jyq5b?file=/src/App.js
Estoy muy perplejo sobre por qué los dos elementos de autocompletar tienen un estilo diferente con un fondo azul claro para las opciones/los cursores de las opciones, pero el otro no.
¡Gracias de antemano por cualquier ayuda que pueda proporcionar!
Probablemente porque el que tiene el complemento disabledPortal se representa dentro del contenedor (Box) con el estilo aplicado. El otro tiene el valor predeterminado disablePortal establecido en falso, por lo que se procesa utilizando el portal de reacción, por lo tanto, fuera de la Caja. Intente configurar este accesorio de la misma manera y vea si son iguales.