blazor-docs/knowledge-base/animationcontainer-close-on-outside-click.md

title	description	type	page_title	slug	tags	ticketid	res_type
Closing the AnimationContainer on Outside Click	Learn how to close the Telerik UI for Blazor AnimationContainer when the user clicks outside the component.	how-to	Closing the AnimationContainer When Users Click Outside It	animationcontainer-kb-close-on-outside-click	telerik, blazor, animationcontainer	1588069, 1593919	kb

Environment

Product

AnimationContainer for Blazor

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.

caption 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]({%slug components/combobox/overview%}#popup-settings).
• The AnimationContainer must reside outside elements with an overflow style. Otherwise, it may be clipped or overlapped by other scrollable containers. This limitation does not exist in the [Popup component]({%slug popup-overview%}).

See Also

• [AnimationContainer Documentation]({%slug components/animationcontainer/overview%})
• [Popup Documentation]({%slug popup-overview%})
• [Comparison between All Popup Components]({%slug common-kb-popup-component-comparison%})