diff --git a/src/components/toolbox/notepad/notepad.tsx b/src/components/toolbox/notepad/notepad.tsx index 5f208fa..de12e0d 100644 --- a/src/components/toolbox/notepad/notepad.tsx +++ b/src/components/toolbox/notepad/notepad.tsx @@ -1,3 +1,4 @@ +import { useRef, useEffect } from 'react'; import { BiTrash } from 'react-icons/bi/index'; import { LuCopy, LuDownload } from 'react-icons/lu/index'; import { FaCheck } from 'react-icons/fa6/index'; @@ -18,6 +19,8 @@ interface NotepadProps { } export function Notepad({ onClose, show }: NotepadProps) { + const textareaRef = useRef(null); + const note = useNoteStore(state => state.note); const history = useNoteStore(state => state.history); const write = useNoteStore(state => state.write); @@ -28,6 +31,14 @@ export function Notepad({ onClose, show }: NotepadProps) { const { copy, copying } = useCopy(); + useEffect(() => { + if (show && textareaRef.current) { + setTimeout(() => { + textareaRef.current?.focus(); + }, 10); + } + }, [show]); + return (
@@ -57,6 +68,7 @@ export function Notepad({ onClose, show }: NotepadProps) { className={styles.textarea} dir="auto" placeholder="What is on your mind?" + ref={textareaRef} value={note} onChange={e => write(e.target.value)} />