Skip to content

Commit 21d2edb

Browse files
[ENG-1416] Fix 'create node modal' focus on input box on load (#723)
* Fix focus issue in ModifyNodeDialog: Keep focus on input field after Enter selection - Add autoFocus to content input field to focus on dialog open - Refocus input after selection to maintain keyboard workflow - Prevents focus from jumping to Node Type dropdown unexpectedly Fixes ENG-1316 Co-authored-by: doantranghp2000 <doantranghp2000@gmail.com> * more fix * address PR comments * current bug fix state * rm changes for other bug * still need the inputRef because on Canvas autofocus doesn't work --------- Co-authored-by: Cursor Agent <cursoragent@cursor.com>
1 parent 38fd0c1 commit 21d2edb

2 files changed

Lines changed: 12 additions & 9 deletions

File tree

apps/roam/src/components/FuzzySelectInput.tsx

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ type FuzzySelectInputProps<T extends Result = Result> = {
2020
options?: T[];
2121
placeholder?: string;
2222
autoFocus?: boolean;
23-
disabled?: boolean;
2423
initialIsLocked?: boolean;
2524
};
2625

@@ -33,7 +32,6 @@ const FuzzySelectInput = <T extends Result = Result>({
3332
options = [],
3433
placeholder = "Enter value",
3534
autoFocus,
36-
disabled,
3735
initialIsLocked,
3836
}: FuzzySelectInputProps<T>) => {
3937
const [isLocked, setIsLocked] = useState(initialIsLocked || false);
@@ -64,6 +62,7 @@ const FuzzySelectInput = <T extends Result = Result>({
6462
setQuery(item.text);
6563
setValue(item);
6664
setIsOpen(false);
65+
requestAnimationFrame(() => inputRef.current?.focus());
6766
}
6867
},
6968
[mode, initialUid, setValue, onLockedChange],
@@ -132,6 +131,12 @@ const FuzzySelectInput = <T extends Result = Result>({
132131
}
133132
}, [activeIndex, isOpen]);
134133

134+
useEffect(() => {
135+
if (!autoFocus || mode !== "create" || isLocked) return;
136+
const id = setTimeout(() => inputRef.current?.focus(), 150);
137+
return () => clearTimeout(id);
138+
}, [autoFocus, mode, isLocked]);
139+
135140
if (mode === "edit") {
136141
return (
137142
<TextArea
@@ -143,7 +148,6 @@ const FuzzySelectInput = <T extends Result = Result>({
143148
growVertically
144149
placeholder={placeholder}
145150
autoFocus={autoFocus}
146-
disabled={disabled}
147151
/>
148152
);
149153
}
@@ -172,14 +176,14 @@ const FuzzySelectInput = <T extends Result = Result>({
172176
<Popover
173177
isOpen={isOpen}
174178
minimal
175-
autoFocus={false}
176-
enforceFocus={false}
177179
position={PopoverPosition.BOTTOM_LEFT}
178180
modifiers={{
179181
flip: { enabled: false },
180182
preventOverflow: { enabled: false },
181183
}}
182184
className="fuzzy-select-input-popover w-full"
185+
autoFocus={false}
186+
enforceFocus={false}
183187
content={
184188
<Menu className="max-h-64 max-w-md overflow-auto" ulRef={menuRef}>
185189
{filteredItems.map((item, index) => (
@@ -199,14 +203,13 @@ const FuzzySelectInput = <T extends Result = Result>({
199203
target={
200204
<InputGroup
201205
fill
206+
inputRef={inputRef}
202207
className="w-full"
203-
disabled={disabled}
204208
value={query}
205209
onChange={(e) => setQuery(e.target.value)}
206210
onKeyDown={handleKeyDown}
207211
autoFocus={autoFocus}
208212
placeholder={placeholder}
209-
inputRef={inputRef}
210213
onFocus={() => {
211214
setIsFocused(true);
212215
}}

apps/roam/src/components/ModifyNodeDialog.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -536,9 +536,9 @@ const ModifyNodeDialog = ({
536536
? "..."
537537
: `Enter a ${selectedNodeType.text.toLowerCase()} ...`
538538
}
539-
disabled={loading}
540539
mode={mode}
541540
initialUid={content.uid}
541+
autoFocus
542542
/>
543543
</div>
544544

@@ -551,10 +551,10 @@ const ModifyNodeDialog = ({
551551
setValue={setReferencedNodeValueCallback}
552552
options={options.referencedNode}
553553
placeholder={loading ? "..." : "Select a referenced node"}
554-
disabled={loading}
555554
mode={"create"}
556555
initialUid={referencedNodeValue.uid}
557556
initialIsLocked={isReferencedNodeLocked}
557+
autoFocus={false}
558558
/>
559559
</div>
560560
)}

0 commit comments

Comments
 (0)