Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 791ee9e

Browse files
feat : input 활성화 시 요소 전체선택 ( 수정 바로 할 수 있도록 )
1 parent 6501aa6 commit 791ee9e

File tree

3 files changed

+26
-1
lines changed

3 files changed

+26
-1
lines changed

‎client/src/components/MindMapHeader/index.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,25 @@ import Profile from "@/components/MindMapHeader/Profile";
33
import { useNodeListContext } from "@/store/NodeListProvider";
44
import { useConnectionStore } from "@/store/useConnectionStore";
55
import { Input } from "@headlessui/react";
6-
import { useState } from "react";
6+
import { useEffect,useRef,useState } from "react";
77
import { FaPencilAlt } from "react-icons/fa";
88

99
export default function MindMapHeader() {
1010
const { title, updateTitle } = useNodeListContext();
1111
const originalContent = title;
12+
const inputRef = useRef<HTMLInputElement | null>(null);
1213
const [editMode, setEditMode] = useState(false);
1314
const handleSocketEvent = useConnectionStore((state) => state.handleSocketEvent);
1415
const role = useConnectionStore((state) => state.currentRole);
1516
const currentJobStatus = useConnectionStore((state) => state.currentJobStatus);
1617

18+
useEffect(() => {
19+
if (editMode && inputRef.current) {
20+
inputRef.current.focus();
21+
inputRef.current.select();
22+
}
23+
}, [editMode]);
24+
1725
function handleInputBlur() {
1826
if (!title.length) {
1927
setEditMode(false);
@@ -48,6 +56,7 @@ export default function MindMapHeader() {
4856
<MindMapHeaderButtons />
4957
{editMode ? (
5058
<Input
59+
ref={inputRef}
5160
className="flex w-80 items-center bg-transparent text-center"
5261
value={title}
5362
onChange={(e) => updateTitle(e.target.value)}

‎client/src/components/MindMapMainSection/ControlSection/ListView/NodeItem.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,13 @@ export default function NodeItem({ node, parentNodeId, open, handleAccordion, op
4747
if (isSelected) openAccordion();
4848
}, [isSelected]);
4949

50+
useEffect(() => {
51+
if (isEditing && inputRef.current) {
52+
inputRef.current.focus();
53+
inputRef.current.select();
54+
}
55+
}, [isEditing]);
56+
5057
function handleAddButton() {
5158
selectNode({ nodeId: node.id, parentNodeId: parentNodeId });
5259
addNode(data, { nodeId: node.id, parentNodeId: parentNodeId }, overrideNodeData, (newNodeId) => {

‎client/src/konva_mindmap/components/EditableTextInput.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { useEffect, useRef } from "react";
12
import { Html } from "react-konva-utils";
23

34
interface EditableTextInputProps {
@@ -23,11 +24,19 @@ export default function EditableTextInput({
2324
focus,
2425
scale,
2526
}: EditableTextInputProps) {
27+
const inputRef = useRef<HTMLInputElement | null>(null);
2628
const fontSize = scale >= 1 ? 16 : 16 / scale;
2729

30+
useEffect(() => {
31+
if (inputRef.current && focus) {
32+
inputRef.current.select();
33+
}
34+
}, [focus]);
35+
2836
return (
2937
<Html groupProps={{ offset: { x: offsetX, y: offsetY } }}>
3038
<input
39+
ref={inputRef}
3140
autoFocus={focus}
3241
value={value}
3342
onChange={onChange}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /