fix(transcription): use local state for textarea to prevent flicker on save
Some checks failed
CI / Unit & Component Tests (push) Has been cancelled
CI / Backend Unit Tests (push) Has been cancelled
CI / E2E Tests (push) Has been cancelled
CI / Unit & Component Tests (pull_request) Failing after 1m28s
CI / Backend Unit Tests (pull_request) Failing after 2m32s
CI / E2E Tests (pull_request) Failing after 1h31m23s

The textarea value was bound directly to the text prop from the parent.
When auto-save completed and updated the blocks array, Svelte re-rendered
the textarea with the prop value, causing the text to disappear briefly.

Fix: use localText state initialized from prop, synced only when blockId
changes (not on save responses). Typing updates localText immediately,
parent re-renders from save don't overwrite the local value.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-05 21:47:00 +02:00
parent 569a13e1b1
commit d8830b5a8e

View File

@@ -36,10 +36,20 @@ let {
onRetry
}: Props = $props();
let localText = $state(text);
let commentOpen = $state(false);
let selectedQuote = $state<string | null>(null);
let textareaEl = $state<HTMLTextAreaElement | null>(null);
// Sync from prop only when switching to a different block (not on save responses)
let prevBlockId = $state(blockId);
$effect(() => {
if (blockId !== prevBlockId) {
localText = text;
prevBlockId = blockId;
}
});
let leftBorderClass = $derived(
saveState === 'error' ? 'border-l-2 border-error' : active ? 'border-l-2 border-turquoise' : ''
);
@@ -65,6 +75,7 @@ function autoresize(node: HTMLTextAreaElement) {
function handleInput(event: Event) {
const target = event.target as HTMLTextAreaElement;
localText = target.value;
onTextChange(target.value);
}
@@ -79,7 +90,7 @@ function captureSelectionAndOpenComments() {
const start = textareaEl.selectionStart;
const end = textareaEl.selectionEnd;
if (start !== end) {
selectedQuote = textareaEl.value.substring(start, end);
selectedQuote = localText.substring(start, end);
} else {
selectedQuote = null;
}
@@ -110,11 +121,11 @@ function captureSelectionAndOpenComments() {
<!-- Textarea -->
<textarea
use:autoresize={text}
use:autoresize={localText}
class="w-full resize-none border-none bg-transparent font-serif text-base leading-relaxed text-ink outline-none placeholder:text-ink-3"
placeholder={m.transcription_block_placeholder()}
rows={1}
value={text}
value={localText}
oninput={handleInput}
onfocus={onFocus}
></textarea>