BlazorDatasheet 영역 밖을 클릭한 경우 콤보가 안 닫히는 증상 해결하기

BlazorDatasheet 영역 밖을 클릭한 경우 콤보가 안 닫히는 증상 해결하기

 

BalzorDatasheet 를 사용하면 sheet 내부에 select type 으로 콤보를 표시하는 경우

콤보박스를 열어놓은 상태에서 sheet 를 벗어난 영역을 클릭하면 콤보박스가 닫히지 않고 남아 있습니다.

Sheet 내부를 클릭하면 정상적으로 닫히지만, 외부 클릭 시에도 닫히게 하려면 BlazorDatasheet의 소스를 수정해야 합니다.

 

sheet-pointer-input.js

아래 //추가 라고 표시된 내용을 추가하고

 

 

class PointerInputService {
    pointerEnterCallbackName;
    pointerDoubleClickCallbackName;
    pointerDownExternalClickCallbackName; // 추가

    constructor(sheetElement, dotnetHelper) {
        this.dotnetHelper = dotnetHelper;
        this.sheetElement = sheetElement;
        this.currentRow = -1
        this.currentCol = -1

        document.addEventListener('pointerdown', this.onHandleDocumentClick.bind(this)); // 추가 
    }
    
    // 인자 추가
    registerPointerEvents(pointerUpCallbackName, pointerDownCallbackName, pointerMoveCallbackName, pointerEnterCallbackName, pointerDoubleClickCallbackName, pointerDownExternalClickCallbackName) {
        this.pointerUpCallbackName = pointerUpCallbackName;
        this.pointerDownCallbackName = pointerDownCallbackName;
        this.pointerMoveCallbackName = pointerMoveCallbackName;
        this.pointerEnterCallbackName = pointerEnterCallbackName;
        this.pointerDoubleClickCallbackName = pointerDoubleClickCallbackName;
        this.pointerDownExternalClickCallbackName = pointerDownExternalClickCallbackName; // 추가

        this.sheetElement.addEventListener('pointerup', this.onPointerUp.bind(this));
        this.sheetElement.addEventListener('pointerdown', this.onPointerDown.bind(this));
        this.sheetElement.addEventListener('dblclick', this.onDoubleClick.bind(this));
        this.sheetElement.addEventListener('pointermove', this.onPointerMove.bind(this));
    }

onHandleDocumentClick 를 정의합니다.

    // 추가
    onHandleDocumentClick(e) {
        // Sheet 내부 클릭은 무시
        if (this.sheetElement.contains(e.target)) {
            return;
        }

        // Sheet 외부 클릭 시 Blazor로 알려줌
        this.dotnetHelper.invokeMethodAsync(this.pointerDownExternalClickCallbackName);
    }

 

 

SheetPointerInputService.cs

위 수정한 sheet-pointer-input.js 의 내용에 맞게 소스를 수정해야합니다. 

아래 // 추가 표시된 내용을 추가합니다.

public EventHandler<EventArgs>? ExternalPointerDown; // 추가

public async Task Init()
{
    _dotNetObjectReference = DotNetObjectReference.Create(this);
    var module =
        await Js.InvokeAsync<IJSObjectReference>("import", "./_content/BlazorDatasheet/js/sheet-pointer-input.js");

    _inputJs = await module.InvokeAsync<IJSObjectReference>(
        "getInputService",
        _sheetElement,
        _dotNetObjectReference);

    await _inputJs.InvokeVoidAsync(
        "registerPointerEvents",
        nameof(HandlePointerUp),
        nameof(HandlePointerDown),
        nameof(HandlePointerMove),
        nameof(HandlePointerCellEnter),
        nameof(HandlePointerDoubleClick),
        nameof(HandleExternalPointerDown)); // 추가

    await module.DisposeAsync();
}

호출될 dotnet function 을 정의합니다.

    // 추가
    [JSInvokable(nameof(HandleExternalPointerDown))]
    public void HandleExternalPointerDown()
    {
        ExternalPointerDown?.Invoke(this, EventArgs.Empty);
    }

 

Datasheet.razor.cs

위 SheetPointerInputService.cs 에서ExternalPointerDown 이벤트를 사용해 sheet 의 edit 상태를 취소하면됩니다.

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        if (GridLevel > 0)
            return;

        _dotnetHelper = DotNetObjectReference.Create(this);

        _sheetPointerInputService = new SheetPointerInputService(Js, _sheetContainer);
        await _sheetPointerInputService.Init();

        _sheetPointerInputService.PointerDown += HandleCellMouseDown;
        _sheetPointerInputService.PointerEnter += HandleCellMouseOver;
        _sheetPointerInputService.PointerDoubleClick += HandleCellDoubleClick;
        _sheetPointerInputService.ExternalPointerDown += HandleExternalPointerDown; // 추가

        await AddWindowEventsAsync();
    }

    _renderRequested = false;
    _sheetIsDirty = false;
    _dirtyRegions.Clear();

    await base.OnAfterRenderAsync(firstRender);
}

// 추가
 private void HandleExternalPointerDown(object? sender, EventArgs e)
 {
     if (_sheet.Editor.IsEditing)
     {
         _sheet.Editor.CancelEdit();
         //StateHasChanged();
     }
 }

이제 아래처럼 sheet 영역을 벗어나 클릭을 하게되면 콤보 표시가 사라지는걸 확인 할 수 있습니다.