Havit.Blazor
Havit.Blazor copied to clipboard
[HxModal] JS Exception: Cannot read properties of null (reading 'style') when navigating to another page while hiding
I've deployed my app for "test production" (real work, small scale). In logs I see exceptions, somehow related to disposing of components (ObjectDisposedException and TaskCanceledException). Users reported that sometimes browser (Edge, Chrome) wouldn't display a scrollbar for a long/large forms which is fixed by reloading page. Not sure if it is related to the exceptions in logs, asked users to report exact time when it happens to correlate to the logs. When debugging similar exceptions are only encountered when I stop debugging in VS. I thought it was only about terminating process. blazor_test.log
Log file excerpt with relevant timeframes is attached. Current Havit.Blazor version 2.3.1
Update regarding problem "Users reported that sometimes browser (Edge, Chrome) wouldn't display a scrollbar for a long/large forms which is fixed by reloading page." It's not related to any exceptions in logs. Nothing in developer console as well. Attaching debug blazor_test.log log file excerpt for the timeframe of this problem ending with a user refreshing page.
Edit: managed to catch a JS exception (at least for one scenario). If you navigate to another page immediately after a modal is closed you get JS exception: Uncaught TypeError: Cannot read properties of null (reading 'style') at Hi._hideModal (modal.js:278:19) at modal.js:174:36 at _ (index.js:251:5) at HTMLDivElement.a (index.js:273:5) at s (index.js:100:11) at index.js:279:7
@Apskaita5 you are probably hitting the issue we fixed few days ago in our latest release. Please update to the very last version of our component library (https://github.com/havit/Havit.Blazor/releases/tag/v2.5.1) Related change: https://github.com/havit/Havit.Blazor/commit/897b36f303d8c7d742025eeb497f6824747ae70a and I guess you are hitting the issue
Updated to v2.5.1. ObjectDisposedException is gone. TaskCanceledException still present in logs, though doesn't seem to be affecting anything. JS exception is still present. If you navigate to another page immediately after a modal is closed (in my case I use modal for 2FA token dialog in login page) you get JS exception: Uncaught TypeError: Cannot read properties of null (reading 'style') at Hi._hideModal (modal.js:278:19) at modal.js:174:36 at _ (index.js:251:5) at HTMLDivElement.a (index.js:273:5) at s (index.js💯11) at index.js:279:7
TaskCanceledException
is "as designed" (this exception indicates successful cancellation instead of a faulty situation) - see https://docs.microsoft.com/en-us/dotnet/standard/parallel-programming/task-cancellation
I was able to reproduce the JS exception with
private async Task HandleHideClick()
{
await myModal.HideAsync();
NavigationManager.NavigateTo("");
}
...it seems that the Modal does not handle removing from DOM when hiding is in progress. This is probably a Bootstrap issue.
@crdo can you please take a look? See related repro /HxModal_Issue148Test
Bootstrap 5.2.0 does not resolve this issue.
With Bootstrap 5.3.2 this issue still reproduces as
modal.js:244 Uncaught TypeError: Cannot read properties of null (reading 'style')
at On._hideModal (modal.js:244:19)
at modal.js:138:36
at g (index.js:226:51)
at HTMLDivElement.a (index.js:247:5)
at s (index.js:71:11)
at index.js:253:7