From 7464dde6db71f2b184e6b58c0d0b3e4b556d388b Mon Sep 17 00:00:00 2001
From: sanjeev <3292092+sanjeev40084@users.noreply.github.com>
Date: Tue, 6 Jan 2026 09:08:22 -0500
Subject: [PATCH] Update index.html

---
 index.html | 35 ++++++++++++++++++++++++++++-------
 1 file changed, 28 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index eafb158..39e7539 100644
--- a/index.html
+++ b/index.html
@@ -175,8 +175,6 @@ <h3 class="font-semibold text-lg">JSON Output</h3>
         </p>
     </footer>
 
-    <datalist id="connectorList"></datalist>
-
     <div id="toast" role="alert" aria-live="polite" class="fixed bottom-10 left-1/2 transform -translate-x-1/2 bg-zinc-800 dark:bg-zinc-100 text-white dark:text-zinc-900 px-6 py-3 rounded shadow-lg font-medium text-sm transition-all duration-300 opacity-0 translate-y-4 pointer-events-none z-50">Copied to clipboard!</div>
 
     <script>
@@ -331,7 +329,9 @@ <h3 class="font-semibold text-lg">JSON Output</h3>
 
         // --- RENDER FUNCTIONS ---
         function init() { initTheme(); loadState(); renderDatalist(); refreshAll(); }
-        function renderDatalist() { document.getElementById('connectorList').innerHTML = COMMON_CONNECTORS.map(c => `<option value="${c.id}">${c.name}</option>`).join(''); }
+        function renderDatalist() { 
+            // Datalist not used anymore for tooltip prevention
+        }
         
         function renderStages() {
             document.getElementById('stageList').innerHTML = state.stages.map(s => 
@@ -349,7 +349,6 @@ <h3 class="font-semibold text-lg">JSON Output</h3>
             const thead = document.querySelector(`#${tableId} thead`);
             
             const headerBgClass = document.documentElement.classList.contains('dark') ? 'bg-zinc-900' : 'bg-slate-50';
-            // UPDATED: Increased width from 450px to 600px for Connection References
             const firstColClass = type === 'conn' ? 'min-w-[600px]' : 'min-w-[350px]';
 
             // Header
@@ -372,8 +371,22 @@ <h3 class="font-semibold text-lg">JSON Output</h3>
                         class="w-full px-2 py-1.5 bg-white dark:bg-zinc-900 border border-slate-300 dark:border-zinc-700 rounded focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all font-medium">`;
                 
                 if(type === 'conn') {
-                    rowHTML += `<input type="text" list="connectorList" aria-label="Connector ID for row ${index+1}" placeholder="Connector ID" value="${escapeHtml(row.connectorId || '')}" oninput="updateConnectorId('${row.id}', this.value)"
-                        class="w-full px-2 py-1.5 bg-slate-50 dark:bg-zinc-950 border border-slate-200 dark:border-zinc-800 rounded focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all font-mono text-xs text-slate-600 dark:text-zinc-400">`;
+                    // Quick Select Logic
+                    const options = COMMON_CONNECTORS.map(c => `<option value="${c.id}">${c.name}</option>`).join('');
+                    
+                    rowHTML += `
+                    <div class="relative w-full">
+                        <input type="text" id="conn-input-${row.id}" aria-label="Connector ID for row ${index+1}" placeholder="Connector ID" value="${escapeHtml(row.connectorId || '')}" oninput="updateConnectorId('${row.id}', this.value)"
+                            class="w-full pl-2 pr-8 py-1.5 bg-slate-50 dark:bg-zinc-950 border border-slate-200 dark:border-zinc-800 rounded focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all font-mono text-xs text-slate-600 dark:text-zinc-400">
+                        
+                        <div class="absolute right-1 top-1/2 transform -translate-y-1/2">
+                            <select onchange="updateConnectorId('${row.id}', this.value); this.value='';" class="opacity-0 absolute inset-0 w-full h-full cursor-pointer" aria-label="Quick Select Connector">
+                                <option value="" selected disabled>Select...</option>
+                                ${options}
+                            </select>
+                            <span class="text-slate-400 hover:text-primary cursor-pointer text-lg leading-none" title="Quick Fill Connector">⚡</span>
+                        </div>
+                    </div>`;
                 }
                 rowHTML += `</td>`;
                 
@@ -480,9 +493,17 @@ <h3 class="font-semibold text-lg">JSON Output</h3>
             if(item) { item.key = val; debouncedSaveAndGenerate(); }
         }
 
+        // FIX: Removed renderTable call, updated DOM element directly
         function updateConnectorId(id, val) {
             const item = state.connRefs.find(r => String(r.id) === String(id));
-            if(item) { item.connectorId = val; debouncedSaveAndGenerate(); }
+            if(item) { 
+                item.connectorId = val; 
+                debouncedSaveAndGenerate(); 
+                
+                // Manually update the input if this came from the dropdown select
+                const input = document.getElementById('conn-input-' + id);
+                if(input) input.value = val;
+            }
         }
 
         function updateValue(type, id, stage, val) {