좋습니다. 설명 정말 명확합니다. 바로 정리해볼게요.
---
🛑 현재 문제 상황 요약
셀 클릭 → 셀 편집 모드 (combo/select editor)로 진입
Sheet 내부 다른 셀 클릭 → 콤보박스(div)가 잘 사라짐
Sheet 바깥(외부 영역) 클릭 → 콤보박스(div)가 계속 남아 있음 (안 사라짐)
즉, 현재는
"Sheet 내부 클릭 이벤트" 로만 에디터 종료(close)가 트리거 되고,
"Sheet 바깥 클릭" 은 감지하지 못해서 에디터가 닫히지 않는 거예요.
---
✅ 이걸 해결하는 방법
"문서(document) 전체 클릭 감지" 이벤트를 걸고,
Sheet 외부 클릭 시 에디터(콤보박스)를 닫게 하면 됩니다.
---
✨ 구체적 수정 방법
1. sheet-pointer-input.js에 document 클릭 이벤트 등록하기
constructor(sheetElement, scrollContainer, dotnetHelper) {
this.sheetElement = sheetElement;
this.scrollContainer = scrollContainer;
this.dotnetHelper = dotnetHelper;
// 🔥 문서 클릭 감지 추가
document.addEventListener('pointerdown', this.handleDocumentClick.bind(this));
}
---
2. 외부 클릭 처리 핸들러 추가
handleDocumentClick(e) {
// Sheet 내부 클릭은 무시
if (this.sheetElement.contains(e.target)) {
return;
}
// 🔥 Sheet 바깥 클릭 시
this.dotnetHelper.invokeMethodAsync('OnExternalClick');
}
---
3. Datasheet.razor 또는 관련 C# 코드에 메서드 추가
[JSInvokable]
public Task OnExternalClick()
{
Sheet.CloseEditor(); // 셀 편집 종료 (콤보박스 닫힘)
StateHasChanged(); // 화면 다시 그리기
return Task.CompletedTask;
}
Sheet 클래스에 CloseEditor() 같은 메서드가 없으면
기존 Sheet 상태를 보고 직접 구현해줘야 해요 (아마 EditorLayer 쪽에 에디터를 닫는 메서드가 있음).
---
📦 정리 최종 플로우
---
✏️ 추가 참고
pointerdown 이벤트를 쓰는 이유: click 이벤트보다 더 빨리 반응할 수 있음
contains() 함수로 클릭이 sheetElement 안인지 밖인지 구분
---
🎯 핵심 요약
> "Sheet 바깥 클릭"을 감지해서 → "콤보박스 닫기" 로직을 넣으면 해결된다.
document.addEventListener('pointerdown', ...) 로 처리하면 된다.
---
원하시면,
직접 수정한 sheet-pointer-input.js 샘플 코드
Datasheet.razor에서 OnExternalClick 처리 예제
코드 통째로 정리해서 바로 적용할 수 있게 만들어 드릴게요.
바로 진행할까요? (진짜 깔끔하게 패치해드릴 수 있습니다!) 🚀
[예 / 아니오] 로만 답해주시면 바로 넘어갈게요!
좋습니다. 아주 정확히 짚어주셨습니다.
---
✅ 상황 정리
네, 당연히 지금 PointerInputService 안에 handleDocumentClick 함수는 원래 존재하지 않습니다.
내가 직접 추가해야 하는 함수입니다. (기존 코드에 없으니까 새로 만들어야 합니다.)
---
✨ 정확한 추가 방법 (요약)
sheet-pointer-input.js 파일 안에,
PointerInputService 클래스 안에
새로 handleDocumentClick 메서드를 추가해야 합니다.
예를 들면 이렇게요:
class PointerInputService {
constructor(sheetElement, scrollContainer, dotnetHelper) {
this.sheetElement = sheetElement;
this.scrollContainer = scrollContainer;
this.dotnetHelper = dotnetHelper;
// ✅ 여기에 문서 클릭 이벤트 연결
document.addEventListener('pointerdown', this.handleDocumentClick.bind(this));
}
handleDocumentClick(e) {
// ✅ Sheet 내부 클릭은 무시
if (this.sheetElement.contains(e.target)) {
return;
}
// ✅ Sheet 외부 클릭 시 Blazor로 알려줌
this.dotnetHelper.invokeMethodAsync('OnExternalClick');
}
// ... 기존 onPointerMove, onPointerDown 등 다른 메서드 계속 ...
}
---
❗ 정리
---
✏️ 추가로 주의할 점
@JSInvokable C# 메서드도 Datasheet 쪽에 만들어야 합니다.
(예: OnExternalClick 메서드 추가)
dispose 처리 (컴포넌트 dispose 시 document 이벤트를 제거하는 코드)도 나중에 추가하는 게 좋습니다.
안 하면 메모리릭(memory leak)이 생길 수 있어요.
예시:
document.removeEventListener('pointerdown', this.handleDocumentClick);
필요하면 이 부분도 깔끔히 패키지해서 알려드릴게요.
---
✅ 질문에 대한 최종 답변
> handleDocumentClick는 직접 추가하는 함수입니다.
PointerInputService 클래스 안에 위 예시처럼 추가해야 합니다.
---
바로 전체 패치 버전(최소 수정 + 안전버전) JS + C#까지 다 만들어드릴까요?
원하시면 예만 답해주세요. 바로 준비해서 드릴게요! 🚀 (아주 빠르게 적용 가능하게 만들어드릴게요)
카테고리 없음