Commit 20dc80e
**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: tinkle-community <[email protected]>
1 parent ffa8985 commit 20dc80e
1 file changed
+9
-11
lines changed| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
153 | 153 | | |
154 | 154 | | |
155 | 155 | | |
156 | | - | |
157 | | - | |
158 | | - | |
159 | | - | |
160 | | - | |
161 | | - | |
162 | 156 | | |
163 | 157 | | |
164 | 158 | | |
| |||
176 | 170 | | |
177 | 171 | | |
178 | 172 | | |
179 | | - | |
180 | | - | |
181 | | - | |
182 | | - | |
183 | | - | |
| 173 | + | |
| 174 | + | |
| 175 | + | |
| 176 | + | |
| 177 | + | |
| 178 | + | |
| 179 | + | |
| 180 | + | |
| 181 | + | |
184 | 182 | | |
185 | 183 | | |
186 | 184 | | |
| |||
0 commit comments