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}>