From 6cd98929d32ccfb4547c4bd870174768834286fe Mon Sep 17 00:00:00 2001
From: Alice Gaudon <alice@gaudon.pro>
Date: Tue, 9 Nov 2021 18:07:31 +0100
Subject: [PATCH] Fix Field textarea focus label move

---
 src/assets/views/utils/Field.svelte | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/assets/views/utils/Field.svelte b/src/assets/views/utils/Field.svelte
index 06840c1..94c5df5 100644
--- a/src/assets/views/utils/Field.svelte
+++ b/src/assets/views/utils/Field.svelte
@@ -74,6 +74,8 @@
     function handleFileInput() {
         files = input.files;
     }
+
+    let focused = false;
 </script>
 
 <style lang="scss">
@@ -139,7 +141,7 @@
 			outline-offset: 0;
 		}
 
-		&:not(.empty), select ~, [type="file"] ~, [type="color"] ~, :focus ~ {
+		&:not(.empty), select ~, [type="file"] ~, [type="color"] ~, .focused ~, :focus ~ {
 			.sections label {
 				top: 8px;
 				font-size: 14px;
@@ -393,9 +395,11 @@
                 </select>
                 <Icon name="chevron-down"/>
             {:else if type === 'textarea'}
-                <div class="textarea-growing-wrapper" data-value={value}>
+                <div class="textarea-growing-wrapper" class:focused={focused} data-value={value}>
                     <textarea {name} id={fieldId} {value} {...$$restProps} bind:this={input}
-                              on:input={handleInput}></textarea>
+                              on:input={handleInput}
+                              on:focusin={() => focused = true}
+                              on:focusout={() => focused = false}></textarea>
                 </div>
             {:else if type === 'checkbox'}
                 <input {type} {name} id={fieldId} checked={value === 'on'} {...$$restProps} bind:this={input}>