ashpie
/
swaf
1
0
Fork 0
Code Issues 22 Pull Requests Releases 11 Wiki Activity

Fix Field textarea focus label move

This commit is contained in:
Alice Gaudon 2021-11-09 18:07:31 +01:00
parent 5cea1b866e
commit 6cd98929d3
1 changed files with 7 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/assets/views/utils/Field.svelte
View File

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