chore: add autocomplete styles

pixel-point · Nov 29, 2024 · 0193d2e · 0193d2e
1 parent 3e06930
commit 0193d2e
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 6 deletions.
diff --git a/packages/ui/src/components/input.tsx b/packages/ui/src/components/input.tsx
@@ -11,7 +11,8 @@ export interface BaseInputProps extends React.InputHTMLAttributes<HTMLInputEleme
 
 const BaseInput = React.forwardRef<HTMLInputElement, BaseInputProps>(
   ({ className, type, isExtended, error, wrapperClassName, ...props }, ref) => {
-    const commonClassName = 'bg-transparent placeholder:text-foreground-5 text-foreground-1 px-3 py-1'
+    const commonClassName =
+      'remove-autocomplete-styles bg-transparent placeholder:text-foreground-5 text-foreground-1 px-3 py-1'
     const specificClassNames = isExtended
       ? 'border-none grow focus-visible:outline-none'
       : cn(
@@ -47,7 +48,7 @@ export interface ExtendedInputProps extends BaseInputProps {
 }
 
 const containerClassName =
-  'flex h-9 w-full rounded border border-input text-sm shadow-sm transition-colors placeholder:text-foreground-4 focus-within:outline-none focus-within:ring-1 focus-within:ring-ring disabled:cursor-not-allowed disabled:opacity-50'
+  'remove-autocomplete-styles flex h-9 w-full rounded border border-input text-sm shadow-sm transition-colors placeholder:text-foreground-4 focus-within:outline-none focus-within:ring-1 focus-within:ring-ring disabled:cursor-not-allowed disabled:opacity-50'
 const leftRightCommonClassName = 'flex items-center text-muted-foreground'
 
 const ExtendedInput = React.forwardRef<HTMLInputElement, ExtendedInputProps>(

diff --git a/packages/ui/src/styles.css b/packages/ui/src/styles.css
@@ -1219,10 +1219,20 @@
   }
 }
 
-/* Text utilities */
-.text-radial-gradient {
-  /* remove hardcode colors */
-  @apply bg-gradient-radial text-primary/70 from-[#CA9AF4]/70 to-[#CA9AF4]/0 bg-clip-text;
+@layer utilities {
+  /*
+    Handy CSS class to prevent Input background color becomes yellow in Chrome on autofill.
+    Works as well with inputs with transparent background.
+
+    https://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete
+  */
+  .remove-autocomplete-styles:-webkit-autofill,
+  .remove-autocomplete-styles:-webkit-autofill:hover,
+  .remove-autocomplete-styles:-webkit-autofill:focus {
+    transition:
+      background-color 5000s,
+      color 5000s;
+  }
 }
 
 .border-linear {
@@ -1233,6 +1243,12 @@
   mask-composite: exclude;
 }
 
+/* Text utilities */
+.text-radial-gradient {
+  /* remove hardcode colors */
+  @apply bg-gradient-radial text-primary/70 from-[#CA9AF4]/70 to-[#CA9AF4]/0 bg-clip-text;
+}
+
 /* Card utilities */
 .card-auth {
   @apply w-[362px] border-none;