fix: 첫 글자 입력 시 포커스 유지 문제 해결
- handleAddGroupEntry: + 추가 버튼 클릭 시 미리 빈 entry를 배열에 추가 - handleFieldChange: 기존 entry 업데이트만 수행 (새로운 entry 추가 로직 제거) - 이제 첫 글자 입력 시에도 배열 길이가 변하지 않아 포커스가 유지됨
This commit is contained in:
parent
3d74b9deb2
commit
cddce40f35
|
|
@ -263,14 +263,14 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
|
|||
// 🆕 그룹별 필드 변경 핸들러: itemId + groupId + entryId + fieldName
|
||||
const handleFieldChange = useCallback((itemId: string, groupId: string, entryId: string, fieldName: string, value: any) => {
|
||||
setItems((prevItems) => {
|
||||
const updatedItems = prevItems.map((item) => {
|
||||
return prevItems.map((item) => {
|
||||
if (item.id !== itemId) return item;
|
||||
|
||||
const groupEntries = item.fieldGroups[groupId] || [];
|
||||
const existingEntryIndex = groupEntries.findIndex((e) => e.id === entryId);
|
||||
|
||||
if (existingEntryIndex >= 0) {
|
||||
// 기존 entry 업데이트
|
||||
// 기존 entry 업데이트 (항상 이 경로로만 진입)
|
||||
const updatedEntries = [...groupEntries];
|
||||
updatedEntries[existingEntryIndex] = {
|
||||
...updatedEntries[existingEntryIndex],
|
||||
|
|
@ -284,22 +284,11 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
|
|||
},
|
||||
};
|
||||
} else {
|
||||
// 새로운 entry 추가
|
||||
const newEntry: GroupEntry = {
|
||||
id: entryId,
|
||||
[fieldName]: value,
|
||||
};
|
||||
return {
|
||||
...item,
|
||||
fieldGroups: {
|
||||
...item.fieldGroups,
|
||||
[groupId]: [...groupEntries, newEntry],
|
||||
},
|
||||
};
|
||||
// 이 경로는 발생하면 안 됨 (handleAddGroupEntry에서 미리 추가함)
|
||||
console.warn("⚠️ entry가 없는데 handleFieldChange 호출됨:", { itemId, groupId, entryId });
|
||||
return item;
|
||||
}
|
||||
});
|
||||
|
||||
return updatedItems;
|
||||
});
|
||||
}, []);
|
||||
|
||||
|
|
@ -311,6 +300,25 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
|
|||
// 🆕 그룹 항목 추가 핸들러 (특정 그룹에 새 항목 추가)
|
||||
const handleAddGroupEntry = (itemId: string, groupId: string) => {
|
||||
const newEntryId = `entry-${Date.now()}`;
|
||||
|
||||
// 🔧 미리 빈 entry를 추가하여 리렌더링 방지
|
||||
setItems((prevItems) => {
|
||||
return prevItems.map((item) => {
|
||||
if (item.id !== itemId) return item;
|
||||
|
||||
const groupEntries = item.fieldGroups[groupId] || [];
|
||||
const newEntry: GroupEntry = { id: newEntryId };
|
||||
|
||||
return {
|
||||
...item,
|
||||
fieldGroups: {
|
||||
...item.fieldGroups,
|
||||
[groupId]: [...groupEntries, newEntry],
|
||||
},
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
setIsEditing(true);
|
||||
setEditingItemId(itemId);
|
||||
setEditingDetailId(newEntryId);
|
||||
|
|
|
|||
Loading…
Reference in New Issue