Closing the AnimationContainer on Outside Click

Environment

Product

Telerik® UI for Blazor AnimationContainer

Description

When I click outside of the AnimationContainer, the control doesn't collapse like other popup components and you have to manually click the Toggle button for the component to do so. How can I enable the AnimationContainer to close with a user clicks outside of it?

Solution

To achieve the desired scenario:

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 target event and check if it is inside or outside the AnimationContainer. Use the custom 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 the AnimationContainer upon an 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, consider this in the opening and closing logic. The above example uses a bool flag for the AnimatioContainer state.
• All Telerik Blazor popup and drop-down components are rendered at the root of the app, and not at the place of declaration. For example, if the AnimationContainer contains a ComboBox, its drop-down will render outside the AnimationContainer. This behavior affects the check in step 3 above. To distinguish it, use another Class for the nested popup.
• The AnimationContainer must 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

• AnimationContainer Documentation
• Telerik UI for Blazor Popup Feature Request Tracking