From 9beb2c1936682d379500aaba4b98eb04c312f4bb Mon Sep 17 00:00:00 2001
From: Vadym Samoilenko <vadymsamoilenko@oliver.agency>
Date: Sat, 14 Mar 2026 23:12:32 +0000
Subject: [PATCH] Fix Studio textarea focus loss on every keystroke
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 frontend/src/app/notebooks/[id]/page.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/src/app/notebooks/[id]/page.tsx b/frontend/src/app/notebooks/[id]/page.tsx
index d063492..0b17947 100644
--- a/frontend/src/app/notebooks/[id]/page.tsx
+++ b/frontend/src/app/notebooks/[id]/page.tsx
@@ -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>