Oliver/sandbox-notebookllamalm-nextjs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix Studio textarea focus loss on every keystroke

Browse source 
Replaced inner Textarea component (defined inside StudioCustomizeModal)
with a plain renderTextarea() function called directly — prevents React
from unmounting/remounting the textarea on each re-render.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Vadym Samoilenko 2026-03-14 23:12:32 +00:00
parent b6a30f5830
commit 9beb2c1936
1 changed files with 7 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
frontend/src/app/notebooks/[id]/page.tsx
View file

@ -1618,7 +1618,7 @@ function StudioCustomizeModal({ type, opts, isPending, onChange, onGenerate, onC
</button>
);
const Textarea = ({ field, placeholder }: { field: string; placeholder: string }) => (
const renderTextarea = (field: string, placeholder: string) => (
<textarea
value={opts[field] || ''}
onChange={(e) => set(field, e.target.value)}
@ -1665,7 +1665,7 @@ function StudioCustomizeModal({ type, opts, isPending, onChange, onGenerate, onC
</div>
<div>
<p className="text-xs font-semibold mb-2" style={{ color: '#8E8E93' }}>What should the topic be?</p>
<Textarea field="custom_prompt" placeholder={type==='flashcards' ? "e.g. Focus on definitions only, restrict to chapter 3..." : "e.g. Focus on key concepts, restrict to a specific topic..."} />
{renderTextarea("custom_prompt", type==='flashcards' ? "e.g. Focus on definitions only, restrict to chapter 3..." : "e.g. Focus on key concepts, restrict to a specific topic...")}
</div>
</>)}
@ -1697,7 +1697,7 @@ function StudioCustomizeModal({ type, opts, isPending, onChange, onGenerate, onC
</div>
<div>
<p className="text-xs font-semibold mb-2" style={{ color: '#8E8E93' }}>Describe the slide deck you want to create</p>
<Textarea field="custom_prompt" placeholder="e.g. Create a deck for beginners using a bold and playful style with a focus on step-by-step instructions." />
{renderTextarea("custom_prompt", "e.g. Create a deck for beginners using a bold and playful style with a focus on step-by-step instructions.")}
</div>
</>)}
@ -1711,7 +1711,7 @@ function StudioCustomizeModal({ type, opts, isPending, onChange, onGenerate, onC
</div>
<div>
<p className="text-xs font-semibold mb-2" style={{ color: '#8E8E93' }}>Describe the report you want to create</p>
<Textarea field="custom_prompt" placeholder="e.g. Focus on financial implications, include risk analysis..." />
{renderTextarea("custom_prompt", "e.g. Focus on financial implications, include risk analysis...")}
</div>
</>)}
@ -1733,7 +1733,7 @@ function StudioCustomizeModal({ type, opts, isPending, onChange, onGenerate, onC
</div>
<div>
<p className="text-xs font-semibold mb-2" style={{ color: '#8E8E93' }}>Describe the infographic you want to create</p>
<Textarea field="custom_prompt" placeholder="e.g. Use a blue colour theme and highlight the 3 key stats." />
{renderTextarea("custom_prompt", "e.g. Use a blue colour theme and highlight the 3 key stats.")}
</div>
</>)}
@ -1741,7 +1741,7 @@ function StudioCustomizeModal({ type, opts, isPending, onChange, onGenerate, onC
{type === 'datatable' && (
<div>
<p className="text-xs font-semibold mb-2" style={{ color: '#8E8E93' }}>Describe the data table you want to create</p>
<Textarea field="custom_prompt" placeholder="e.g. Create a table with the major findings, using columns: title, author, key result, date." />
{renderTextarea("custom_prompt", "e.g. Create a table with the major findings, using columns: title, author, key result, date.")}
</div>
)}
@ -1749,7 +1749,7 @@ function StudioCustomizeModal({ type, opts, isPending, onChange, onGenerate, onC
{type === 'mindmap' && (
<div>
<p className="text-xs font-semibold mb-2" style={{ color: '#8E8E93' }}>What should the mind map focus on?</p>
<Textarea field="custom_prompt" placeholder="e.g. Focus on the causal relationships between topics." />
{renderTextarea("custom_prompt", "e.g. Focus on the causal relationships between topics.")}
</div>
)}
</div>