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
- Set a custom
Class
for the AnimationContainer to distinguish its HTML element in JavaScript code. - When you open the AnimationContainer with
ShowAsync()
, call a JavaScript function and subscribe to theclick
event of thedocumentElement
. - In the JavaScript
click
handler, get the eventtarget
and check if it is inside or outside the AnimationContainer. Use the CSS Class from step 1. - If the target is outside, call a .NET method from the JavaScript code that will close the AnimationContainer.
- 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.