Hack around chrome autofill to handle filling on page load and look half-decent
This commit is contained in:
parent
6aca32591e
commit
9311680f4c
1 changed files with 34 additions and 2 deletions
|
@ -1,5 +1,5 @@
|
||||||
<script>
|
<script>
|
||||||
import { createEventDispatcher } from "svelte"
|
import { createEventDispatcher, onMount } from "svelte"
|
||||||
import FancyField from "./FancyField.svelte"
|
import FancyField from "./FancyField.svelte"
|
||||||
import FancyFieldLabel from "./FancyFieldLabel.svelte"
|
import FancyFieldLabel from "./FancyFieldLabel.svelte"
|
||||||
import { fade } from "svelte/transition"
|
import { fade } from "svelte/transition"
|
||||||
|
@ -14,8 +14,11 @@
|
||||||
|
|
||||||
const dispatch = createEventDispatcher()
|
const dispatch = createEventDispatcher()
|
||||||
|
|
||||||
|
let ref
|
||||||
let focused = false
|
let focused = false
|
||||||
$: placeholder = !focused && !value
|
let autofilled = false
|
||||||
|
|
||||||
|
$: placeholder = !autofilled && !focused && !value
|
||||||
|
|
||||||
const onChange = e => {
|
const onChange = e => {
|
||||||
const newValue = e.target.value
|
const newValue = e.target.value
|
||||||
|
@ -25,6 +28,27 @@
|
||||||
error = validate(newValue)
|
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>
|
</script>
|
||||||
|
|
||||||
<FancyField {error} {value} {validate} {disabled} {focused}>
|
<FancyField {error} {value} {validate} {disabled} {focused}>
|
||||||
|
@ -39,6 +63,7 @@
|
||||||
on:focus={() => (focused = true)}
|
on:focus={() => (focused = true)}
|
||||||
on:blur={() => (focused = false)}
|
on:blur={() => (focused = false)}
|
||||||
class:placeholder
|
class:placeholder
|
||||||
|
bind:this={ref}
|
||||||
/>
|
/>
|
||||||
{#if suffix && !placeholder}
|
{#if suffix && !placeholder}
|
||||||
<div in:fade|local={{ duration: 130 }} class="suffix">{suffix}</div>
|
<div in:fade|local={{ duration: 130 }} class="suffix">{suffix}</div>
|
||||||
|
@ -74,4 +99,11 @@
|
||||||
line-height: 17px;
|
line-height: 17px;
|
||||||
font-family: var(--font-sans);
|
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>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue