feat: forms better compatibility with chrome autofill (#278)

openstream-fm · Feb 8, 2024 · b13f24f · b13f24f
2 parents 9827896 + 5a98e05
commit b13f24f
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 4 deletions.
diff --git a/front/share/src/Form/Input.svelte b/front/share/src/Form/Input.svelte
@@ -23,6 +23,8 @@
 
   export let on_change: ((v: string) => void) | null = null; 
 
+  import css from "./forms.module.css"; 
+
   $: empty = display_value === "";
 
   $: text_lines = display_value.split("\n").length;
@@ -49,11 +51,18 @@
     on_change?.(h);
   }
 
-  import css from "./forms.module.css"; 
+  const mount = (el: HTMLInputElement | HTMLTextAreaElement) => {
+    setTimeout(() => {
+      if(el.value !== "") {
+        on_input(el.value);
+      }
+    }, 500)
+  }
 </script>
 
+
 {#if multiline}
-  <textarea class={css["forms-input"]} {maxlength} {rows} {autocomplete} {disabled} {readonly} value={display_value} on:input={event => on_input(event.currentTarget.value)} on:input />
+  <textarea use:mount class={css["forms-input"]} {maxlength} {rows} {autocomplete} {disabled} {readonly} value={display_value} on:input={event => on_input(event.currentTarget.value)} on:input />
 {:else}
-  <input {type} class={css["forms-input"]} {min} {max} {step} {autocomplete} {disabled} {readonly} value={display_value} on:input={event => on_input(event.currentTarget.value)} on:input />
+  <input use:mount {type} class={css["forms-input"]} {min} {max} {step} {autocomplete} {disabled} {readonly} value={display_value} on:input={event => on_input(event.currentTarget.value)} on:input />
 {/if}
diff --git a/front/share/src/Form/Label.svelte b/front/share/src/Form/Label.svelte
@@ -16,12 +16,15 @@
     color: var(--blue);
   }
 
+  :global(.field-container:not(.with-icon):has(:-webkit-autofill)) .label,
   :global(.field-container:not(.with-icon):focus-within) .label,
   :global(.field-container:not(.with-icon)) .full {
     transform: translateY(-110%) scale(0.7);
     transform-origin: 0 0;
   }
 
+
+  :global(.field-container.with-icon:has(:-webkit-autofill)) .label,
   :global(.field-container.with-icon:focus-within) .label,
   :global(.field-container.with-icon) .full {
     transform: translateX(-1.75rem) translateY(-110%) scale(0.7);

diff --git a/front/share/src/Form/forms.module.css b/front/share/src/Form/forms.module.css
@@ -2,11 +2,23 @@
   display: block;
   flex: 1;
   width: 1rem; /* fix min-width issue */
+  min-width: 0;
   border: 0;
   outline: 0;
   padding: 0.75rem;
-  min-width: 0;
   background: transparent;
   resize: none;
   color: #000;
+  appearance: none;
+}
+
+.forms-input:-webkit-autofill,
+.forms-input:-webkit-autofill:active,
+.forms-input:-webkit-autofill:hover,
+.forms-input:-webkit-autofill:focus {
+  font: inherit !important;
+  /* TODO: overriding of chrome font is not working */
+  appearance: none !important;
+  -webkit-text-fill-color: #000 !important;
+  -webkit-background-clip: text !important;
 }
diff --git a/front/share/src/LoginDashboard/login-page.css b/front/share/src/LoginDashboard/login-page.css
@@ -47,6 +47,7 @@
   font-weight: 600;
   position: relative;
   transition: color 200ms ease;
+  border-radius: 0.25rem;
 }
 
 .login-page-button.sending {