Detect click outside of element for Blazor.
An improvement of Blazor.OutsideClickHandler.
- There's an issue that after OnClickOutside is invoked, it creates a new addeventlistener everytime creating a flood unused event listeners. This does not, it only creates one and stores OutsideClickHandler instances on a list on first render and removes it when StopPropagation is true or when the component is disposed.
- There's also an issue when OnClickOutside is continuously triggered when unneeded. StopPropagation mitigates that.
- Install nuget package.
- Add to the desired component/page or in _Imports.razor.
@using OutsideClickHandler.Component
- Add js src on index.html in wwwroot folder.
<script src="_content/OutsideClickHandler/outsideClickHandler.js"></script>- That's it! You may now use it.
- OnOutsideClick
- Accepts void function to be called on outside click.
- Executed first when both OnOutsideClick and OnOutsideClickTask have value.
- OnOutsideClickTask
- Accepts awaitable function to be called on outside click.
- StopPropagation
- Stops OnOutsideClick and OnOutsideClickTask from executing when true.