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
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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user