From 5a98e05f88edd48231e0aa4293de78afd488c99d Mon Sep 17 00:00:00 2001
From: ramiroaisen <52116153+ramiroaisen@users.noreply.github.com>
Date: Thu, 8 Feb 2024 18:27:11 -0300
Subject: [PATCH] feat: forms better compatibility with chrome autofill

---
 front/share/src/Form/Input.svelte             | 15 ++++++++++++---
 front/share/src/Form/Label.svelte             |  3 +++
 front/share/src/Form/forms.module.css         | 14 +++++++++++++-
 front/share/src/LoginDashboard/login-page.css |  1 +
 4 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/front/share/src/Form/Input.svelte b/front/share/src/Form/Input.svelte
index 6751b99d..84b559cf 100644
--- 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
index 9074f946..b8d79778 100644
--- 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
index c560a569..55e7f801 100644
--- 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;
 }
\ No newline at end of file
diff --git a/front/share/src/LoginDashboard/login-page.css b/front/share/src/LoginDashboard/login-page.css
index da28ca60..75214970 100644
--- 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 {