diff --git a/apps/roam/src/components/FuzzySelectInput.tsx b/apps/roam/src/components/FuzzySelectInput.tsx index 16acdca1a..e685811b8 100644 --- a/apps/roam/src/components/FuzzySelectInput.tsx +++ b/apps/roam/src/components/FuzzySelectInput.tsx @@ -1,4 +1,10 @@ -import React, { useState, useCallback, useMemo, useRef, useEffect } from "react"; +import React, { + useState, + useCallback, + useMemo, + useRef, + useEffect, +} from "react"; import { Button, TextArea, @@ -14,27 +20,22 @@ import { Result } from "~/utils/types"; type FuzzySelectInputProps = { value?: T; setValue: (q: T) => void; - onLockedChange?: (isLocked: boolean) => void; mode: "create" | "edit"; - initialUid: string; options?: T[]; placeholder?: string; autoFocus?: boolean; - initialIsLocked?: boolean; + isLocked: boolean; }; const FuzzySelectInput = ({ value, setValue, - onLockedChange, mode, - initialUid, options = [], placeholder = "Enter value", autoFocus, - initialIsLocked, + isLocked, }: FuzzySelectInputProps) => { - const [isLocked, setIsLocked] = useState(initialIsLocked || false); const [query, setQuery] = useState(() => value?.text || ""); const [isOpen, setIsOpen] = useState(false); const [activeIndex, setActiveIndex] = useState(0); @@ -52,28 +53,31 @@ const FuzzySelectInput = ({ const handleSelect = useCallback( (item: T) => { - if (mode === "create" && item.uid && item.uid !== initialUid) { - setIsLocked(true); - setQuery(item.text); - setValue(item); - setIsOpen(false); - onLockedChange?.(true); - } else { - setQuery(item.text); - setValue(item); - setIsOpen(false); + setQuery(item.text); + setValue(item); + setIsOpen(false); + + if (!(mode === "create" && item.uid)) { requestAnimationFrame(() => inputRef.current?.focus()); } }, - [mode, initialUid, setValue, onLockedChange], + [mode, setValue], ); const handleClear = useCallback(() => { - setIsLocked(false); setQuery(""); setValue({ ...value, text: "", uid: "" } as T); - onLockedChange?.(false); - }, [value, setValue, onLockedChange]); + }, [value, setValue]); + + const handleInputChange = useCallback( + (text: string) => { + setQuery(text); + if (mode === "create" && !isLocked) { + setValue({ text, uid: "" } as T); + } + }, + [mode, isLocked, setValue], + ); const handleKeyDown = useCallback( (e: React.KeyboardEvent) => { @@ -100,10 +104,9 @@ const FuzzySelectInput = ({ ); useEffect(() => { - if (mode === "create" && !isLocked) { - setValue({ text: query, uid: "" } as T); - } - }, [query, mode, isLocked, setValue]); + if (isLocked) return; + setQuery(value?.text ?? ""); + }, [isLocked, value?.text]); useEffect(() => { if (isFocused && filteredItems.length > 0 && query) { @@ -206,7 +209,7 @@ const FuzzySelectInput = ({ inputRef={inputRef} className="w-full" value={query} - onChange={(e) => setQuery(e.target.value)} + onChange={(e) => handleInputChange(e.target.value)} onKeyDown={handleKeyDown} autoFocus={autoFocus} placeholder={placeholder} @@ -223,4 +226,4 @@ const FuzzySelectInput = ({ ); }; -export default FuzzySelectInput; \ No newline at end of file +export default FuzzySelectInput; diff --git a/apps/roam/src/components/ModifyNodeDialog.tsx b/apps/roam/src/components/ModifyNodeDialog.tsx index ebd84e473..c36ff9071 100644 --- a/apps/roam/src/components/ModifyNodeDialog.tsx +++ b/apps/roam/src/components/ModifyNodeDialog.tsx @@ -84,12 +84,8 @@ const ModifyNodeDialog = ({ [content.uid, initialValue.uid, mode], ); const isReferencedNodeLocked = useMemo( - () => - Boolean( - referencedNodeValue.uid && - referencedNodeValue.uid !== initialReferencedNode?.uid, - ), - [referencedNodeValue.uid, initialReferencedNode?.uid], + () => Boolean(referencedNodeValue.uid), + [referencedNodeValue.uid], ); const [options, setOptions] = useState<{ @@ -537,7 +533,7 @@ const ModifyNodeDialog = ({ : `Enter a ${selectedNodeType.text.toLowerCase()} ...` } mode={mode} - initialUid={content.uid} + isLocked={isContentLocked} autoFocus /> @@ -552,8 +548,7 @@ const ModifyNodeDialog = ({ options={options.referencedNode} placeholder={loading ? "..." : "Select a referenced node"} mode={"create"} - initialUid={referencedNodeValue.uid} - initialIsLocked={isReferencedNodeLocked} + isLocked={isReferencedNodeLocked} autoFocus={false} />