증상: 품목 추가 모달에서 행 클릭과 체크박스 클릭 둘 다 toggle 호출 →
두 번 발생해서 체크 상태가 변하지 않음.
수정:
- 체크박스 td 에 stopPropagation 추가 (행 onClick 으로 버블되지 않게)
- 행 클릭은 그대로 행 전체 토글로 동작
- 체크박스 명시 cursor:pointer + 크기 18px + 색상 accent-emerald-600
- select-none 추가 (드래그 시 글자 선택 방지)
- 헤더 전체선택 체크박스도 동일 처리
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -561,9 +561,13 @@ function ItemPicker({ vendorObjid, existingItemIds, onClose, onAddItems }: {
|
||||
<thead className="bg-slate-50 sticky top-0">
|
||||
<tr>
|
||||
<th className="px-2 py-2 w-10">
|
||||
<input type="checkbox" onChange={toggleAll}
|
||||
<input
|
||||
type="checkbox"
|
||||
onChange={toggleAll}
|
||||
checked={filtered.length > 0 && filtered.every((it) => selected.has(it.OBJID))}
|
||||
className="cursor-pointer" />
|
||||
style={{ cursor: "pointer", width: 18, height: 18 }}
|
||||
className="accent-emerald-600"
|
||||
/>
|
||||
</th>
|
||||
<th className="text-left px-2 py-2">품목명</th>
|
||||
<th className="text-left px-2 py-2">공급업체</th>
|
||||
@@ -579,9 +583,16 @@ function ItemPicker({ vendorObjid, existingItemIds, onClose, onAddItems }: {
|
||||
) : filtered.map((it) => (
|
||||
<tr key={it.OBJID}
|
||||
onClick={() => toggle(it.OBJID)}
|
||||
className={`border-t border-slate-100 cursor-pointer ${selected.has(it.OBJID) ? "bg-emerald-50" : "hover:bg-slate-50"}`}>
|
||||
<td className="px-2 py-1.5 text-center">
|
||||
<input type="checkbox" checked={selected.has(it.OBJID)} onChange={() => toggle(it.OBJID)} />
|
||||
style={{ cursor: "pointer" }}
|
||||
className={`border-t border-slate-100 select-none ${selected.has(it.OBJID) ? "bg-emerald-50" : "hover:bg-slate-50"}`}>
|
||||
<td className="px-2 py-1.5 text-center" onClick={(e) => e.stopPropagation()}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selected.has(it.OBJID)}
|
||||
onChange={() => toggle(it.OBJID)}
|
||||
style={{ cursor: "pointer", width: 18, height: 18 }}
|
||||
className="accent-emerald-600"
|
||||
/>
|
||||
</td>
|
||||
<td className="px-2 py-1.5">
|
||||
<div className="font-semibold">{it.ITEM_NAME}</div>
|
||||
|
||||
Reference in New Issue
Block a user