Close AnimationContainer on Outside Click

Environment

Product

AnimationContainer for Blazor

Description

If I click outside of the Animation Container, the control doesn't collapse like other popup components. You have to manually click to on the toggle button. How to close the Animation Container with a user click outside of it?

Solution

1. Set a custom Class for the AnimationContainer to distinguish its HTML element in JavaScript code.
2. When you open the AnimationContainer with ShowAsync(), call a JavaScript function and subscribe to the click event of the documentElement.
3. In the JavaScript click handler, get the event target and check if it is inside or outside the AnimationContainer. Use the CSS Class from step 1.
4. If the target is outside, call a .NET method from the JavaScript code that will close the AnimationContainer.
5. When closing the AnimationContainer from JavaScript, detach the click handler from step 2.

Close AnimationContainer on outside click

@inject IJSRuntime js

@implements IDisposable

<TelerikButton OnClick="@ShowTAC">Show Animation Container</TelerikButton>

<TelerikAnimationContainer @ref="@TAC" Class="tac">
    <div style="border:1px solid red;width:400px;height:200px;">animation container</div>
</TelerikAnimationContainer>

@* suppress-error allows script tags in Razor files. Move this script to a separate file *@
<script suppress-error="BL9992">//
    function attachCloseTAC(dotNetReference) {
        dotNet = dotNetReference;
        document.documentElement.addEventListener("click", checkHideTAC);
    }

    var dotNet;

    function checkHideTAC(e) {
        if (!e.target.closest(".tac")) {
            document.documentElement.removeEventListener("click", checkHideTAC);
            dotNet.invokeMethodAsync("HideTAC");
        }
    }
//</script>

@code {
    private TelerikAnimationContainer TAC { get; set; }

    private bool TACOpen { get; set; }

    private DotNetObjectReference<Index>? DotNetRef;

    private async Task ShowTAC()
    {
        if (!TACOpen)
        {
            TACOpen = true;
            await TAC.ShowAsync();
            await js.InvokeVoidAsync("attachCloseTAC", DotNetRef);
        }
    }

    [JSInvokable("HideTAC")]
    public async Task HideTAC()
    {
        await TAC.HideAsync();
        TACOpen = false;
    }

    protected override void OnInitialized()
    {
        DotNetRef = DotNetObjectReference.Create(this);
    }

    public void Dispose()
    {
        DotNetRef?.Dispose();
    }
}

Notes

If the AnimationContainer is opened as a result of a button click, take this into account in the opening and closing logic. The above example uses a bool flag for the AnimatioContainer state.

All Telerik Blazor popup and dropdown components are rendered at the root of the app, and not at place of declaration. For example, if the AnimationContainer contains a ComboBox, its dropdown will render outside the AnimationContainer. This affects the check in step 3 above. Use another Class for the nested popup to distinguish it.

The AnimationContainer should reside outside elements with an overflow style. Otherwise, it may be clipped or overlapped by other scrollable containers. This limitation will not exist for the future Popup component.

See Also

• Animation Container Documentation
• Telerik Blazor Popup feature request tracking