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
|
onRetry
|
||||||
}: Props = $props();
|
}: Props = $props();
|
||||||
|
|
||||||
|
let localText = $state(text);
|
||||||
let commentOpen = $state(false);
|
let commentOpen = $state(false);
|
||||||
let selectedQuote = $state<string | null>(null);
|
let selectedQuote = $state<string | null>(null);
|
||||||
let textareaEl = $state<HTMLTextAreaElement | 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(
|
let leftBorderClass = $derived(
|
||||||
saveState === 'error' ? 'border-l-2 border-error' : active ? 'border-l-2 border-turquoise' : ''
|
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) {
|
function handleInput(event: Event) {
|
||||||
const target = event.target as HTMLTextAreaElement;
|
const target = event.target as HTMLTextAreaElement;
|
||||||
|
localText = target.value;
|
||||||
onTextChange(target.value);
|
onTextChange(target.value);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -79,7 +90,7 @@ function captureSelectionAndOpenComments() {
|
|||||||
const start = textareaEl.selectionStart;
|
const start = textareaEl.selectionStart;
|
||||||
const end = textareaEl.selectionEnd;
|
const end = textareaEl.selectionEnd;
|
||||||
if (start !== end) {
|
if (start !== end) {
|
||||||
selectedQuote = textareaEl.value.substring(start, end);
|
selectedQuote = localText.substring(start, end);
|
||||||
} else {
|
} else {
|
||||||
selectedQuote = null;
|
selectedQuote = null;
|
||||||
}
|
}
|
||||||
@@ -110,11 +121,11 @@ function captureSelectionAndOpenComments() {
|
|||||||
|
|
||||||
<!-- Textarea -->
|
<!-- Textarea -->
|
||||||
<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"
|
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()}
|
placeholder={m.transcription_block_placeholder()}
|
||||||
rows={1}
|
rows={1}
|
||||||
value={text}
|
value={localText}
|
||||||
oninput={handleInput}
|
oninput={handleInput}
|
||||||
onfocus={onFocus}
|
onfocus={onFocus}
|
||||||
></textarea>
|
></textarea>
|
||||||
|
|||||||
Reference in New Issue
Block a user