fix: sync symbol input with focus ticker

- Add searchQuery state to ConfluencePanel that tracks input value
- Pass value={searchQuery} and onChange={setSearchQuery} to SymbolAutocomplete
- Sync searchQuery when activeSymbol changes externally (from another panel)
- Update SymbolAutocomplete onChange to call externalOnChange in controlled mode
- Input now shows current symbol after pick and stays in sync
This commit is contained in:
Investor Flow Build
2026-08-11 23:25:51 -04:00
parent 9a1d837150
commit 96ce1c9e96
2 changed files with 24 additions and 10 deletions
+16 -7
View File
@@ -48,13 +48,20 @@ export function ConfluencePanel() {
const activeSymbol = useActiveSymbol((s) => s.activeSymbol);
const setActiveSymbol = useActiveSymbol((s) => s.setActive);
const [symbol, setSymbol] = useState(activeSymbol);
const [searchQuery, setSearchQuery] = useState(activeSymbol);
const [selectedRackId, setSelectedRackId] = useState<string | null>(null);
const pickSymbol = useCallback((sym: string) => {
setSymbol(sym);
setSearchQuery(sym);
setActiveSymbol(sym);
}, [setActiveSymbol]);
// Sync searchQuery when activeSymbol changes externally (e.g., from another panel)
useEffect(() => {
setSearchQuery(activeSymbol);
}, [activeSymbol]);
// Racks
const [racks, setRacks] = useState<{ system: Array<{ id: string; name: string }>; user: Array<{ id: string; name: string }> }>({ system: [], user: [] });
useEffect(() => {
@@ -123,13 +130,15 @@ export function ConfluencePanel() {
<div>
<label className="block text-xs text-fg-muted mb-1">Symbol</label>
<div className="relative w-48">
<SymbolAutocomplete
onPick={pickSymbol}
onSubmitRaw={(raw) => pickSymbol(raw.toUpperCase())}
placeholder="Search symbol…"
ariaLabel="Select symbol for signal confluence"
inputClassName="w-full bg-surface-sunken border border-line rounded-lg px-3 py-1.5 text-xs text-fg placeholder:text-fg-muted focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent"
/>
<SymbolAutocomplete
value={searchQuery}
onChange={setSearchQuery}
onPick={pickSymbol}
onSubmitRaw={(raw) => pickSymbol(raw.toUpperCase())}
placeholder="Search symbol…"
ariaLabel="Select symbol for signal confluence"
inputClassName="w-full bg-surface-sunken border border-line rounded-lg px-3 py-1.5 text-xs text-fg placeholder:text-fg-muted focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent"
/>
</div>
</div>
{symbol && (
+8 -3
View File
@@ -82,11 +82,16 @@ export function SymbolAutocomplete({
}, [onBusyChange]);
const onChange = useCallback((v: string) => {
setInternalQuery(v);
externalOnChange?.(v);
if (controlledValue !== undefined) {
// Controlled mode: let parent handle the value change
externalOnChange?.(v);
} else {
setInternalQuery(v);
externalOnChange?.(v);
}
if (timerRef.current) clearTimeout(timerRef.current);
timerRef.current = setTimeout(() => runSearch(v), 150);
}, [runSearch, externalOnChange]);
}, [runSearch, externalOnChange, controlledValue]);
// Click-outside closes the dropdown.
useEffect(() => {