Skip to content

Commit 4a1c42a

Browse files
Inneilwshen
authored andcommitted
🐛 fix: topic renaming input focus issue in context menu (lobehub#11323)
Fixes LOBE-2838 This commit resolves the issue where the input field wasn't properly focused when renaming topics through the context menu. Changes: - Created FocusableInput component that ensures input focus using queueMicrotask - Replaced autoFocus prop with proper ref-based focus management - Simplified onBlur handler logic - Removed duplicate toggleEditing call from handleUpdate The queueMicrotask approach ensures the focus happens after the Popover has fully rendered and positioned itself.
1 parent bc3a7da commit 4a1c42a

File tree

1 file changed

+18
-9
lines changed
  • src/app/[variants]/(main)/chat/_layout/Sidebar/Topic/List/Item

1 file changed

+18
-9
lines changed

src/app/[variants]/(main)/chat/_layout/Sidebar/Topic/List/Item/Editing.tsx

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import { Input, Popover } from '@lobehub/ui';
2-
import { memo, useCallback, useState } from 'react';
1+
import { Input, type InputProps, Popover } from '@lobehub/ui';
2+
import type { InputRef } from 'antd';
3+
import { memo, useCallback, useEffect, useRef, useState } from 'react';
34

45
import { useChatStore } from '@/store/chat';
56

@@ -9,6 +10,18 @@ interface EditingProps {
910
toggleEditing: (visible?: boolean) => void;
1011
}
1112

13+
function FocusableInput({ ...props }: InputProps) {
14+
const ref = useRef<InputRef>(null);
15+
useEffect(() => {
16+
queueMicrotask(() => {
17+
if (ref.current) {
18+
ref.current.input?.focus();
19+
}
20+
});
21+
}, []);
22+
return <Input {...props} ref={ref} />;
23+
}
24+
1225
const Editing = memo<EditingProps>(({ id, title, toggleEditing }) => {
1326
const [newTitle, setNewTitle] = useState(title);
1427
const [editing, updateTopicTitle] = useChatStore((s) => [
@@ -41,19 +54,14 @@ const Editing = memo<EditingProps>(({ id, title, toggleEditing }) => {
4154
);
4255
}
4356
}
44-
toggleEditing(false);
4557
}, [newTitle, title, id, updateTopicTitle, toggleEditing]);
4658

4759
return (
4860
<Popover
4961
content={
50-
<Input
51-
autoFocus
62+
<FocusableInput
5263
defaultValue={title}
53-
onBlur={() => {
54-
handleUpdate();
55-
toggleEditing(false);
56-
}}
64+
onBlur={handleUpdate}
5765
onChange={(e) => setNewTitle(e.target.value)}
5866
onClick={(e) => e.stopPropagation()}
5967
onPressEnter={() => {
@@ -64,6 +72,7 @@ const Editing = memo<EditingProps>(({ id, title, toggleEditing }) => {
6472
}
6573
onOpenChange={(open) => {
6674
if (!open) handleUpdate();
75+
6776
toggleEditing(open);
6877
}}
6978
open={editing}

0 commit comments

Comments
 (0)