LG-4507: fix autocomplete styles in FormFieldInputContainer (#2475)

* LG-4507: fix FormFieldInputContainer autocomplete styling * Changeset
mongodb · Sep 16, 2024 · 07bab63 · 07bab63
1 parent 6b8ad3d
commit 07bab63
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 13 deletions.
diff --git a/.changeset/late-houses-work.md b/.changeset/late-houses-work.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/form-field': patch
+---
+
+[LG-4507](https://jira.mongodb.org/browse/LG-4507): fix `FormFieldInputContainer` autocomplete styling used in `DateInputSegment`, `TextArea` and `TextInput`. A double-border issue occurs when the auto-completed input has focus or hover state applied
diff --git a/packages/form-field/src/FormFieldInputContainer/FormFieldInputContainer.styles.ts b/packages/form-field/src/FormFieldInputContainer/FormFieldInputContainer.styles.ts
@@ -70,20 +70,8 @@ const getInputWrapperModeStyles = (theme: Theme) => {
       &:-webkit-autofill {
         color: ${color[theme].text.primary.default};
         background: ${backgroundColor};
-        border: 1px solid ${color[theme].border.primary.default};
         -webkit-text-fill-color: ${color[theme].text.primary.default};
         box-shadow: ${autofillShadowOverride(backgroundColor)};
-
-        &:focus {
-          box-shadow: ${autofillShadowOverride(backgroundColor)},
-            ${focusRing[theme].input};
-          border-color: ${color[theme].border.primary.focus};
-        }
-
-        &:hover:not(:focus) {
-          box-shadow: ${autofillShadowOverride(backgroundColor)},
-            ${hoverRing[theme].gray};
-        }
       }
 
       &::placeholder {
@@ -234,7 +222,6 @@ const getInputWrapperDisabledThemeStyles = (theme: Theme) => {
         &:focus {
           appearance: none;
 
-          border: 1px solid ${color[theme].border.disabled.hover};
           -webkit-text-fill-color: ${color[theme].text.disabled.hover};
           box-shadow: ${autofillShadowOverride(
             color[theme].background.disabled.hover,