Can a Panel and a Dialog Can Coexist?

[AathifMahir]

Actually, I have UX Where Users Enters Entity On a Panel and also that Panel has Input for Uploading Image, When a new Image is Opened with Input, that would open a new Image Editor Dialog Which Does All the Image Manipulation, Previously I have Used Dialog.Hide and Dialog.Show on the Panel to Hide the Panel When the ImageEditor Dialog Needs to be Open and Show the Panel Back When ImageEditor Dialog is Closed with Dialog.Show, This Behavior Seems to be Broken with v4.10, If i Call the Dialog Hide for The Panel and Opens a New Dialog aka Image Editor Dialog (Not a Panel), That would cause the Js Code in ImageEditor OnInitializedAsync to Throw an JsException Without Any Info What Causing it, What i did with the recent update after wasting Some time on Diagnosing the JsException on Image Editor Dialog, I Just Tried Removing Dialog.Hide and Dialog.Show Code on the Panel, that Magically Fixed the JsException on ImageEditor But the Both the Panel and Dialog Were Shown Together, I'm not sure if this supported as previously we can't use Nested Dialogs

Edit: I Notice that I Have Randomly Receive Javascript Error from Fluent UI When Doing the Above

[dvoituron]

Can you give us more details about this JS Error (screenshot)?

[AathifMahir]

Can you give us more details about this JS Error (screenshot)?

Sorry for the Delay @dvoituron

Additional Note, I'm Using Cropper.Blazor Nuget for Some Part of Image Manipulation also Utilizing It's Helper Method Called GetImageUsingStreamingAsync() Method that Accepts IBrowserFile to Temporarily Store the image in the browser and generate traditional url for that, This code is Called on Image Editor OnInitializedAsync

This is a Error Log that i Got When i Open a Dialog Over Panel Without Hiding the Panel First, This Happens Randomly, Around 50% of the time it works
https://jpst.it/3UvxZ

This is the Error i Get When i Hide the Panel Before Opening the Dialog

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: Failed to fetch
TypeError: Failed to fetch
Microsoft.JSInterop.JSException: Failed to fetch
TypeError: Failed to fetch
at Cropper.Blazor.Services.CropperJsInterop.GetImageUsingStreamingAsync(IBrowserFile imageFile, Int64 maxAllowedSize, CancellationToken cancellationToken)
at {Project_Name}.Components.Dialogs.ImageEditorDialog.OnInitializedAsync() in {Project_Location}\Components\Dialogs\ImageEditorDialog.razor:line 124
at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

As far Error Logs, this seems to be issue with Cropper.Blazor but it isn't as far as my Testing the Cause, Seems like Js Thread is Blocked Therefore Blazor.Cropper wasn't able to run that OnInitializedAsync Code or else i might Totally Wrong

Lastly, If i don't Open ImageEditor Dialog From Panel Instead if we open directly from a Page or Component, It works Flawlessly