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:
@@ -48,13 +48,20 @@ export function ConfluencePanel() {
|
|||||||
const activeSymbol = useActiveSymbol((s) => s.activeSymbol);
|
const activeSymbol = useActiveSymbol((s) => s.activeSymbol);
|
||||||
const setActiveSymbol = useActiveSymbol((s) => s.setActive);
|
const setActiveSymbol = useActiveSymbol((s) => s.setActive);
|
||||||
const [symbol, setSymbol] = useState(activeSymbol);
|
const [symbol, setSymbol] = useState(activeSymbol);
|
||||||
|
const [searchQuery, setSearchQuery] = useState(activeSymbol);
|
||||||
const [selectedRackId, setSelectedRackId] = useState<string | null>(null);
|
const [selectedRackId, setSelectedRackId] = useState<string | null>(null);
|
||||||
|
|
||||||
const pickSymbol = useCallback((sym: string) => {
|
const pickSymbol = useCallback((sym: string) => {
|
||||||
setSymbol(sym);
|
setSymbol(sym);
|
||||||
|
setSearchQuery(sym);
|
||||||
setActiveSymbol(sym);
|
setActiveSymbol(sym);
|
||||||
}, [setActiveSymbol]);
|
}, [setActiveSymbol]);
|
||||||
|
|
||||||
|
// Sync searchQuery when activeSymbol changes externally (e.g., from another panel)
|
||||||
|
useEffect(() => {
|
||||||
|
setSearchQuery(activeSymbol);
|
||||||
|
}, [activeSymbol]);
|
||||||
|
|
||||||
// Racks
|
// Racks
|
||||||
const [racks, setRacks] = useState<{ system: Array<{ id: string; name: string }>; user: Array<{ id: string; name: string }> }>({ system: [], user: [] });
|
const [racks, setRacks] = useState<{ system: Array<{ id: string; name: string }>; user: Array<{ id: string; name: string }> }>({ system: [], user: [] });
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -124,6 +131,8 @@ export function ConfluencePanel() {
|
|||||||
<label className="block text-xs text-fg-muted mb-1">Symbol</label>
|
<label className="block text-xs text-fg-muted mb-1">Symbol</label>
|
||||||
<div className="relative w-48">
|
<div className="relative w-48">
|
||||||
<SymbolAutocomplete
|
<SymbolAutocomplete
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={setSearchQuery}
|
||||||
onPick={pickSymbol}
|
onPick={pickSymbol}
|
||||||
onSubmitRaw={(raw) => pickSymbol(raw.toUpperCase())}
|
onSubmitRaw={(raw) => pickSymbol(raw.toUpperCase())}
|
||||||
placeholder="Search symbol…"
|
placeholder="Search symbol…"
|
||||||
|
|||||||
@@ -82,11 +82,16 @@ export function SymbolAutocomplete({
|
|||||||
}, [onBusyChange]);
|
}, [onBusyChange]);
|
||||||
|
|
||||||
const onChange = useCallback((v: string) => {
|
const onChange = useCallback((v: string) => {
|
||||||
|
if (controlledValue !== undefined) {
|
||||||
|
// Controlled mode: let parent handle the value change
|
||||||
|
externalOnChange?.(v);
|
||||||
|
} else {
|
||||||
setInternalQuery(v);
|
setInternalQuery(v);
|
||||||
externalOnChange?.(v);
|
externalOnChange?.(v);
|
||||||
|
}
|
||||||
if (timerRef.current) clearTimeout(timerRef.current);
|
if (timerRef.current) clearTimeout(timerRef.current);
|
||||||
timerRef.current = setTimeout(() => runSearch(v), 150);
|
timerRef.current = setTimeout(() => runSearch(v), 150);
|
||||||
}, [runSearch, externalOnChange]);
|
}, [runSearch, externalOnChange, controlledValue]);
|
||||||
|
|
||||||
// Click-outside closes the dropdown.
|
// Click-outside closes the dropdown.
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|||||||
Reference in New Issue
Block a user