From 9311680f4c8b315b5d13696f2edc3ca6f4e19edc Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 7 Feb 2023 12:11:25 +0000
Subject: [PATCH] Hack around chrome autofill to handle filling on page load
 and look half-decent

---
 packages/bbui/src/FancyForm/FancyInput.svelte | 36 +++++++++++++++++--
 1 file changed, 34 insertions(+), 2 deletions(-)

diff --git a/packages/bbui/src/FancyForm/FancyInput.svelte b/packages/bbui/src/FancyForm/FancyInput.svelte
index 8735e2c30c..0c58b9b045 100644
--- a/packages/bbui/src/FancyForm/FancyInput.svelte
+++ b/packages/bbui/src/FancyForm/FancyInput.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { createEventDispatcher } from "svelte"
+  import { createEventDispatcher, onMount } from "svelte"
   import FancyField from "./FancyField.svelte"
   import FancyFieldLabel from "./FancyFieldLabel.svelte"
   import { fade } from "svelte/transition"
@@ -14,8 +14,11 @@
 
   const dispatch = createEventDispatcher()
 
+  let ref
   let focused = false
-  $: placeholder = !focused && !value
+  let autofilled = false
+
+  $: placeholder = !autofilled && !focused && !value
 
   const onChange = e => {
     const newValue = e.target.value
@@ -25,6 +28,27 @@
       error = validate(newValue)
     }
   }
+
+  onMount(() => {
+    // Start watching for autofill every 100ms
+    const interval = setInterval(() => {
+      autofilled = ref?.matches(":-webkit-autofill")
+      if (autofilled) {
+        clearInterval(interval)
+      }
+    }, 100)
+
+    // Give up after 2 seconds and assume autofill has not been used
+    const timeout = setTimeout(() => {
+      clearInterval(interval)
+    }, 2000)
+
+    // Cleanup
+    return () => {
+      clearInterval(interval)
+      clearTimeout(timeout)
+    }
+  })
 </script>
 
 <FancyField {error} {value} {validate} {disabled} {focused}>
@@ -39,6 +63,7 @@
     on:focus={() => (focused = true)}
     on:blur={() => (focused = false)}
     class:placeholder
+    bind:this={ref}
   />
   {#if suffix && !placeholder}
     <div in:fade|local={{ duration: 130 }} class="suffix">{suffix}</div>
@@ -74,4 +99,11 @@
     line-height: 17px;
     font-family: var(--font-sans);
   }
+  input:-webkit-autofill {
+    border-radius: 2px;
+    -webkit-box-shadow: 0 0 0 100px var(--spectrum-global-color-gray-300) inset;
+    -webkit-text-fill-color: var(--spectrum-global-color-gray-900);
+    transition: -webkit-box-shadow 130ms 200ms, background-color 0s 86400s;
+    padding: 3px 8px 4px 8px;
+  }
 </style>