From 1502b7ba0c763b8b5809d7cdd3a6eda265dbc58c Mon Sep 17 00:00:00 2001
From: 0xYYBB | ZYY | Bobo <128128010+zhouyongyou@users.noreply.github.com>
Date: Mon, 10 Nov 2025 11:57:55 +0800
Subject: [PATCH] fix(web): remove circular dependency causing trading symbols
 input bug (#632) (#671)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**Problem:**
Unable to type comma-separated trading symbols in the input field.
When typing "BTCUSDT," → comma immediately disappears → cannot add more symbols.

**Root Cause:**
Circular state dependency between `useEffect` and `handleInputChange`:

```typescript
// ❌ Lines 146-149: useEffect syncs selectedCoins → formData
useEffect(() => {
  const symbolsString = selectedCoins.join(',')
  setFormData(prev => ({ ...prev, trading_symbols: symbolsString }))
}, [selectedCoins])

// Lines 150-153: handleInputChange syncs formData → selectedCoins
if (field === 'trading_symbols') {
  const coins = value.split(',').map(...).filter(...)
  setSelectedCoins(coins)
}
```

**Execution Flow:**
1. User types: `"BTCUSDT,"`
2. `handleInputChange` fires → splits by comma → filters empty → `selectedCoins = ["BTCUSDT"]`
3. `useEffect` fires → joins → overwrites input to `"BTCUSDT"` ❌ **Trailing comma removed!**
4. User cannot continue typing

**Solution:**
Remove the redundant `useEffect` (lines 146-149) and update `handleCoinToggle` to directly sync both states:

```typescript
// ✅ handleCoinToggle now updates both states
const handleCoinToggle = (coin: string) => {
  setSelectedCoins(prev => {
    const newCoins = prev.includes(coin) ? ... : ...

    // Directly update formData.trading_symbols
    const symbolsString = newCoins.join(',')
    setFormData(current => ({ ...current, trading_symbols: symbolsString }))

    return newCoins
  })
}
```

**Why This Works:**
- **Quick selector buttons** (`handleCoinToggle`): Now updates both states ✅
- **Manual input** (`handleInputChange`): Already updates both states ✅
- **No useEffect interference**: User can type freely ✅

**Impact:**
- ✅ Manual typing of comma-separated symbols now works
- ✅ Quick selector buttons still work correctly
- ✅ No circular dependency
- ✅ Cleaner unidirectional data flow

Fixes #632

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Claude <noreply@anthropic.com>
---
 web/src/components/TraderConfigModal.tsx | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/web/src/components/TraderConfigModal.tsx b/web/src/components/TraderConfigModal.tsx
index 183f8fbb..9adcec58 100644
--- a/web/src/components/TraderConfigModal.tsx
+++ b/web/src/components/TraderConfigModal.tsx
@@ -153,12 +153,6 @@ export function TraderConfigModal({
     fetchPromptTemplates()
   }, [])
 
-  // 当选择的币种改变时，更新输入框
-  useEffect(() => {
-    const symbolsString = selectedCoins.join(',')
-    setFormData((prev) => ({ ...prev, trading_symbols: symbolsString }))
-  }, [selectedCoins])
-
   if (!isOpen) return null
 
   const handleInputChange = (field: keyof TraderConfigData, value: any) => {
@@ -176,11 +170,15 @@ export function TraderConfigModal({
 
   const handleCoinToggle = (coin: string) => {
     setSelectedCoins((prev) => {
-      if (prev.includes(coin)) {
-        return prev.filter((c) => c !== coin)
-      } else {
-        return [...prev, coin]
-      }
+      const newCoins = prev.includes(coin)
+        ? prev.filter((c) => c !== coin)
+        : [...prev, coin]
+
+      // 同时更新 formData.trading_symbols
+      const symbolsString = newCoins.join(',')
+      setFormData((current) => ({ ...current, trading_symbols: symbolsString }))
+
+      return newCoins
     })
   }