I am using shadcn input component and have also enabled autocomplete for the input fields but when i am choosing from those suggestions, a few seconds after choosing from the suggestions and exactly when the squiggly red lines(those from spell check) appear below, the text is changing colors from what i specified to black color.

Also i recently added the following code to globals.css of my next.js project to solve the problem of browser auto filling white color into my input elements as soon as i choose from the autocomplete suggestions:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px transparent inset ;
  -webkit-text-fill-color: /*my color in rgb*/ ; 
  caret-color: /*my color in rgb*/;
  transition: background-color 9999s ease-in-out 0s;
}

note: this is only happening when choosing text that gets those squiggly red lines (i.e incorrectly spelled or uncommon words)

Any help is appreciated. Thanks in advance!!