Implement onAfterRenderTasksQueue for show/hide on HxModal analogous to HxOffcanvas (#1000)

Author: alexax578

Havit.Blazor.Components.Web.Bootstrap/Modals/HxModal.razor.cs

@@ -208,10 +208,10 @@ static HxModal()
 
 
 	private bool _opened = false; // indicates whether the modal is open
-	private bool _shouldOpenModal = false; // indicates whether the modal is going to be opened
 	private DotNetObjectReference<HxModal> _dotnetObjectReference;
 	private ElementReference _modalElement;
 	private IJSObjectReference _jsModule;
+	private Queue<Func<Task>> _onAfterRenderTasksQueue = new();
 	private bool _disposed;
 
 	public HxModal()
@@ -224,20 +224,52 @@ public HxModal()
 	/// </summary>
 	public Task ShowAsync()
 	{
+		if (!_opened)
+		{
+			_onAfterRenderTasksQueue.Enqueue(async () =>
+			{
+				// Running JS interop is postponed to OnAfterRenderAsync to ensure modalElement is set
+				// and correct order of commands (Show/Hide) is preserved
+				_jsModule ??= await JSRuntime.ImportHavitBlazorBootstrapModuleAsync(nameof(HxModal));
+				if (_disposed)
+				{
+					return;
+				}
+				await _jsModule.InvokeVoidAsync("show", _modalElement, _dotnetObjectReference, CloseOnEscapeEffective, OnHiding.HasDelegate);
+			});
+		}
 		_opened = true; // mark modal as opened
-		_shouldOpenModal = true; // mark modal to be shown in OnAfterRender			
 
-		StateHasChanged(); // ensures render modal HTML
+		StateHasChanged(); // ensures rendering modal HTML
 
 		return Task.CompletedTask;
 	}
 
 	/// <summary>
 	/// Closes the modal.
 	/// </summary>
-	public async Task HideAsync()
+	public Task HideAsync()
 	{
-		await _jsModule.InvokeVoidAsync("hide", _modalElement);
+		if (!_opened)
+		{
+			// this might be a minor PERF benefit, if it turns out to be causing troubles, we can remove this or make it configurable through optional method parameter
+			return Task.CompletedTask;
+		}
+
+		_onAfterRenderTasksQueue.Enqueue(async () =>
+		{
+			// Running JS interop is postponed to OnAfterRenderAsync to ensure modalElement is set
+			// and correct order of commands (Show/Hide) is preserved
+			_jsModule ??= await JSRuntime.ImportHavitBlazorBootstrapModuleAsync(nameof(HxModal));
+			if (_disposed)
+			{
+				return;
+			}
+			await _jsModule.InvokeVoidAsync("hide", _modalElement);
+		});
+		StateHasChanged(); // enforce rendering
+
+		return Task.CompletedTask;
 	}
 
 	/// <summary>
@@ -268,26 +300,15 @@ public async Task HandleModalHidden()
 	[JSInvokable("HxModal_HandleModalShown")]
 	public async Task HandleModalShown()
 	{
+		_opened = true;
 		await InvokeOnShownAsync();
 	}
 
 	protected override async Task OnAfterRenderAsync(bool firstRender)
 	{
-		await base.OnAfterRenderAsync(firstRender);
-
-		if (_shouldOpenModal)
+		while (_onAfterRenderTasksQueue.TryDequeue(out var task))
 		{
-			// do not run show in every render
-			// the line must be prior to JSRuntime (because BuildRenderTree/OnAfterRender[Async] is called twice; in the bad order of lines the JSRuntime would be also called twice).
-			_shouldOpenModal = false;
-
-			// Running JS interop is postponed to OnAfterAsync to ensure modalElement is set.
-			_jsModule ??= await JSRuntime.ImportHavitBlazorBootstrapModuleAsync(nameof(HxModal));
-			if (_disposed)
-			{
-				return;
-			}
-			await _jsModule.InvokeVoidAsync("show", _modalElement, _dotnetObjectReference, CloseOnEscapeEffective, OnHiding.HasDelegate);
+			await task();
 		}
 	}
 
@@ -363,26 +384,11 @@ protected virtual async ValueTask DisposeAsyncCore()
 
 		if (_jsModule != null)
 		{
-			// We need to remove backdrop when leaving "page" when HxModal is shown (opened).
-			if (_opened)
-			{
-				try
-				{
-					await _jsModule.InvokeVoidAsync("dispose", _modalElement);
-				}
-				catch (JSDisconnectedException)
-				{
-					// NOOP
-				}
-				catch (TaskCanceledException)
-				{
-					// NOOP
-				}
-			}
-
 			try
 			{
+				await _jsModule.InvokeVoidAsync("dispose", _modalElement, _opened);
 				await _jsModule.DisposeAsync();
+
 			}
 			catch (JSDisconnectedException)
 			{

Havit.Blazor.Components.Web.Bootstrap/wwwroot/HxModal.js

@@ -31,7 +31,7 @@ export function hide(element) {
 
 function handleModalShown(event) {
 	event.target.hxModalDotnetObjectReference.invokeMethodAsync('HxModal_HandleModalShown');
-};
+}
 
 async function handleModalHide(event) {
 	const modalInstance = bootstrap.Modal.getInstance(event.target);
@@ -49,21 +49,21 @@ async function handleModalHide(event) {
 		event.target.hxModalHiding = true;
 		modalInstance.hide();
     }
-};
+}
 
 function handleModalHidden(event) {
 	event.target.hxModalHiding = false;
 
 	if (event.target.hxModalDisposing) {
 		// fix for #110 where the dispose() gets called while the offcanvas is still in hiding-transition
-		dispose(event.target);
+		dispose(event.target, false);
 		return;
 	}
 
 	event.target.hxModalDotnetObjectReference.invokeMethodAsync('HxModal_HandleModalHidden');
-};
+}
 
-export function dispose(element) {
+export function dispose(element, opened) {
 	if (!element) {
 		return;
 	}
@@ -75,6 +75,16 @@ export function dispose(element) {
 		return;
 	}
 
+	if (opened) {
+		// #110 Scrolling not working when modal is removed (even if disposed is called)
+		// Compensates https://github.com/twbs/bootstrap/issues/36397,
+		// where the o.dispose() does not reset the ScrollBarHelper() and the scrolling remains deactivated.
+		// The dispose() is re-called from hidden.bs.modal event handler.
+		// Remove when the issue is fixed.
+		hide(element);
+		return;
+	}
+
 	element.removeEventListener('hide.bs.modal', handleModalHide);
 	element.removeEventListener('hidden.bs.modal', handleModalHidden);
 	element.removeEventListener('shown.bs.modal', handleModalShown);