Option to not close dialog on blur

[simonsegatin]

Hi,

first of all thank you for porting Headless UI to Blazor, it's really awesome. I did find the default behavior of dialogs where they close on blur is a bit restrictive.

For example, if I have a form in a slide-over implemented using a dialog, I don't want it to close if the user clicks outside of it as that makes it really easy to unintentionally lose changes. I've kind of solved this by putting the DialogPanel component at the root (e.g. above the backdrop) which works ok but feels a bit hacky.

However, a more difficult problem is if I want to open a nested dialog without closing the previous one. Using the previous example, let's say I want the user to confirm they want to discard any changes they made when clicking Cancel in the slide over form. I'll show a modal dialog prompting them if they want to discard the changes. This works fine, but as soon as they click inside of that modal (e.g. on a "Keep editing" button), the dialog panel of the slide over loses focus and the root dialog closes.

Would it be possible to add an option to disable closing on blur or even better have a way to trigger an event callback on blur. That way, when the user clicks outside of the dialog panel, I could detect it and show the discard changes prompt then close the root dialog based on the user's choice.

Thanks!

[DavidVollmers]

Hi,

Thank you for using Ignis!

You made a good point here. I will make sure to provide event callbacks for focus and blur on all components, so one can cancel them (similar to other events in Ignis).

I hope I will find the time for it today, but expect an update this week :)

[DavidVollmers]

@simonsegatin So with version 1.1.0 you can now prevent the default bahvior of all focus components using the OnBlur event callback. Specifically for your use case you will want to overwrite it on the DialogPanel component:

<DialogPanel OnBlur="e => e.PreventDefault()">
</DialogPanel>

[simonsegatin]

Great, thanks for the quick update!