fix(input): remove background on input when required

`box-shadow: none` was not working correct with input autofocus
Sage · Jul 9, 2021 · f4d3642 · f4d3642
1 parent c40bddb
commit f4d3642
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 4 deletions.
diff --git a/src/__experimental__/components/input/__snapshots__/input.spec.js.snap b/src/__experimental__/components/input/__snapshots__/input.spec.js.snap
@@ -17,6 +17,7 @@ exports[`Input renders with an input 1`] = `
 }
 
 .c0:-webkit-autofill {
+  box-shadow: 0 0 0px 1000px #fff inset;
   -webkit-box-shadow: 0 0 0px 1000px #fff inset;
   -webkit-box-border: none;
 }
@@ -39,7 +40,8 @@ exports[`Input renders with an input 1`] = `
 
 .c0:invalid,
 .c0:required {
-  box-shadow: none;
+  box-shadow: 0 0 0px 1000px #fff inset;
+  -webkit-box-shadow: 0 0 0px 1000px #fff inset;
 }
 
 <input

diff --git a/src/__experimental__/components/input/input.style.js b/src/__experimental__/components/input/input.style.js
@@ -14,6 +14,7 @@ const StyledInput = styled.input`
   width: 30px;
 
   &:-webkit-autofill {
+    box-shadow: 0 0 0px 1000px #fff inset;
     -webkit-box-shadow: 0 0 0px 1000px #fff inset;
     -webkit-box-border: none;
   }
@@ -36,7 +37,8 @@ const StyledInput = styled.input`
     `}
 
   &:invalid, &:required {
-    box-shadow: none;
+    box-shadow: 0 0 0px 1000px #fff inset;
+    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
   }
 
   ${({ readOnly, theme }) =>

diff --git a/...erimental__/components/simple-color-picker/__snapshots__/simple-color-picker.spec.js.snap b/...erimental__/components/simple-color-picker/__snapshots__/simple-color-picker.spec.js.snap
@@ -173,6 +173,7 @@ exports[`SimpleColorPicker renders as expected 1`] = `
 }
 
 .c6:-webkit-autofill {
+  box-shadow: 0 0 0px 1000px #fff inset;
   -webkit-box-shadow: 0 0 0px 1000px #fff inset;
   -webkit-box-border: none;
 }
@@ -195,7 +196,8 @@ exports[`SimpleColorPicker renders as expected 1`] = `
 
 .c6:invalid,
 .c6:required {
-  box-shadow: none;
+  box-shadow: 0 0 0px 1000px #fff inset;
+  -webkit-box-shadow: 0 0 0px 1000px #fff inset;
 }
 
 .c7 {

diff --git a/src/__experimental__/components/textarea/__snapshots__/textarea.spec.js.snap b/src/__experimental__/components/textarea/__snapshots__/textarea.spec.js.snap
@@ -17,6 +17,7 @@ exports[`Textarea when rendered should render default 1`] = `
 }
 
 .c7:-webkit-autofill {
+  box-shadow: 0 0 0px 1000px #fff inset;
   -webkit-box-shadow: 0 0 0px 1000px #fff inset;
   -webkit-box-border: none;
 }
@@ -39,7 +40,8 @@ exports[`Textarea when rendered should render default 1`] = `
 
 .c7:invalid,
 .c7:required {
-  box-shadow: none;
+  box-shadow: 0 0 0px 1000px #fff inset;
+  -webkit-box-shadow: 0 0 0px 1000px #fff inset;
 }
 
 .c4 {