FINAL EDIT: I ended up finding a fix and I updated my sandbox with it!
EDIT: I have determined that it is due to this line in the autocomplete...
isOptionEqualToValue={(option, value) => option.id === value.id}
However, if I try to change it to this...
isOptionEqualToValue={(option, value) => option.label === value.label}
I get the following error in the console...
useAutocomplete.js:219 MUI: The value provided to Autocomplete is invalid. None of the options match with
"Lisinopril". You can use theisOptionEqualToValueprop to customize the equality test.
I have created the following form using Material UI and React Hook Form...
https://codesandbox.io/s/inputquestion-jyq5b?file=/src/App.js
I am very stumped on why the two autocomplete elements are styled differently with a light blue background for the options/the options' hovers, but the other one isn't.
Thanks in advance for any help you can provide!
Probably because the one with the disabledPortal prop is rendered inside the container (Box) with the applied style. The other one has the default disablePortal value set to false so it is rendered using react portal thus outside the Box. Try setting this prop the same and see if they are the same.