Spaces:
Runtime error
Runtime error
File size: 2,399 Bytes
9e93b10 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | <script lang="ts">
import { onMount, tick } from 'svelte';
export let value = '';
export let placeholder = '';
export let rows = 1;
export let minSize = null;
export let maxSize = null;
export let required = false;
export let readonly = false;
export let className =
'w-full rounded-lg px-3.5 py-2 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden h-full';
export let ariaLabel = null;
export let onInput = () => {};
export let onBlur = () => {};
let textareaElement;
// Adjust height on mount and after setting the element.
onMount(async () => {
await tick();
resize();
requestAnimationFrame(() => {
// setInterveal to cehck until textareaElement is set
const interval = setInterval(() => {
if (textareaElement) {
clearInterval(interval);
resize();
}
}, 100);
});
});
const resize = () => {
if (textareaElement) {
// Find all ancestors that currently have an active scroll offset.
// This is extremely fast because reading `scrollTop` on a clean layout doesn't trigger reflow,
// and it makes the fix 100% robust without relying on hardcoded CSS classes.
let activeScrollParents = [];
let p = textareaElement.parentNode;
while (p && p !== document.body) {
if (p instanceof HTMLElement && p.scrollTop > 0) {
activeScrollParents.push({ el: p, top: p.scrollTop });
}
p = p.parentNode;
}
const windowScrollY = window.scrollY;
textareaElement.style.height = '';
let height = textareaElement.scrollHeight;
if (maxSize && height > maxSize) {
height = maxSize;
}
if (minSize && height < minSize) {
height = minSize;
}
textareaElement.style.height = `${height}px`;
// Only restore scroll for elements that were actually scrolled.
// This prevents layout thrashing that happens if we blindly set `.scrollTop` on every parent.
activeScrollParents.forEach((p) => {
if (p.el.scrollTop !== p.top) p.el.scrollTop = p.top;
});
if (window.scrollY !== windowScrollY) {
window.scrollTo(window.scrollX, windowScrollY);
}
}
};
</script>
<textarea
bind:this={textareaElement}
bind:value
{placeholder}
aria-label={ariaLabel || placeholder}
class={className}
style="field-sizing: content;"
{rows}
{required}
{readonly}
on:input={(e) => {
resize();
onInput(e);
}}
on:focus={() => {
resize();
}}
on:blur={onBlur}
/>
|