syncfusion-blazor-toolkit-dialog

Bind visibility with @bind-Visible, set IsModal="true" and ShowCloseIcon="true", then declare DialogButtons with one OnClick handler per button. Use AllowPrerender="false" when the body contains interactive content like EditForm or JS interop.

Handle the cancelable OnClose event and set args.Cancel = true when your dirty-state flag is set. OnClosed is non-cancelable and runs after dismissal, so validation logic belongs in OnClose.

Pick one mechanism only. Use @bind-Visible for declarative state-driven visibility, or use a @ref with Show()/Hide() for programmatic control. Mixing both causes competing state controllers and visual flicker.

The dialog is prerendering interactive content, causing double-mounting or JS errors on first paint. Set AllowPrerender="false" and move JS interop calls into OnAfterRenderAsync instead of OnInitialized.

Use SfDialog for interactions requiring user decisions, form input, or blocking the underlying UI. Use a tooltip for brief hover text and notifications or spinners for non-blocking progress indicators.

Nesting dialogs causes z-index collisions, render artifacts on overlay clicks, and nested focus traps that can lock the browser. Instead, manage stacked dialogs as siblings with increasing z-index, or replace the outer dialog with sequential steps.