From b54ca4afcd30065298c3378f360faf1ac44f5d22 Mon Sep 17 00:00:00 2001
From: rollroyces <rollroyces@gmail.com>
Date: Fri, 29 May 2026 09:15:19 +0000
Subject: [PATCH] fix: resolve model ID input allowing only single character
 input by switching to uncontrolled input with ref

---
 .../settings/view/tabs/PilotDeckConfigTab.tsx         | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/ui/src/components/settings/view/tabs/PilotDeckConfigTab.tsx b/ui/src/components/settings/view/tabs/PilotDeckConfigTab.tsx
index d13f8937..503fd4a8 100644
--- a/ui/src/components/settings/view/tabs/PilotDeckConfigTab.tsx
+++ b/ui/src/components/settings/view/tabs/PilotDeckConfigTab.tsx
@@ -692,7 +692,7 @@ function ProviderCard({
   const protocol = provider.protocol ?? catalogEntry?.protocol ?? 'openai';
   const effectiveUrl = provider.url || catalogEntry?.defaultUrl || '';
   const enabledModels = Object.keys(provider.models ?? {});
-  const [newModelId, setNewModelId] = useState('');
+  const newModelInputRef = useRef<HTMLInputElement>(null);
   const [providerIdDraft, setProviderIdDraft] = useState(providerId);
   const [providerIdError, setProviderIdError] = useState('');
   const displayName = providerDisplayName(
@@ -727,7 +727,7 @@ function ProviderCard({
     if (!id) return;
     if (provider.models && id in provider.models) return;
     update({ models: { ...(provider.models ?? {}), [id]: {} } });
-    setNewModelId('');
+    if (newModelInputRef.current) newModelInputRef.current.value = '';
   };
   const removeModel = (mid: string) => {
     const next = { ...(provider.models ?? {}) };
@@ -902,13 +902,12 @@ function ProviderCard({
         {/* Add custom model */}
         <div className="flex items-center gap-2">
           <input
-            value={newModelId}
-            onChange={(e) => setNewModelId(e.target.value)}
+            ref={newModelInputRef}
             placeholder={t('pilotDeckConfig.panels.models.customModelPlaceholder')}
             className="min-w-0 flex-1 rounded-md border border-border bg-background px-2 py-1 font-mono text-[11px] text-foreground outline-none focus:ring-1 focus:ring-ring"
-            onKeyDown={(e) => { if (e.key === 'Enter' && !isImeEnterEvent(e)) addModel(newModelId); }}
+            onKeyDown={(e) => { if (e.key === 'Enter' && !isImeEnterEvent(e)) addModel(e.currentTarget.value); }}
           />
-          <Button variant="outline" size="sm" className="shrink-0" onClick={() => addModel(newModelId)} disabled={!newModelId.trim()}>
+          <Button variant="outline" size="sm" className="shrink-0" onClick={() => addModel(newModelInputRef.current?.value ?? '')} disabled={!(newModelInputRef.current?.value?.trim())}>
             <Plus className="mr-1 h-3 w-3" />
             {t('pilotDeckConfig.actions.add')}
           </Button>