Custom action for overlay click in FluentDialog

[shark0151]

It would be nice to be able to more finely control what happens with dialogues. The buttons can be controlled, yes. But the header dismiss and overlay click are the default close (though I am unsure if the header dismiss uses the SecondaryFunction). With the overlay, it might be simplest to add a named slot and then I could just plop in whatever element with custom functionality. I think it is most useful in preventing the unintentional closing of dialogues while changing the content inside

[shark0151]

Oh, I see ValidateDialogAsync was added. Perhaps that can help

[dvoituron]

We have already implemented a similar action in the Editable dialog example.
In this example, we can only close the dialog (using the Save button) when a condition is true: _editContext.Validate().
You can customize this condition to suit your code, using other methods or variables.

[shark0151]

I made a video to demonstrate the thing I want to implement. I don't see a way to do it with fluent.

Untitled.video.-.Made.with.Clipchamp.1.mp4

[vnbaaij]

No, I don't think that is possible either out of the box. And I don't think it really fits with the Fluent Design.
But with the options both @dvoituron and I described you should come really close.

[dvoituron]

I agree with @vnbaaij . This is not a feature supported by FluentUI. If you accept that the user clicks on the cross, on the Close button or outside the dialog, then you will receive a result.Cancelled=true. If the user clicks on "Understood" button, you'll receive a result.Cancelled=false. You don't have an event to detect when you click outside.

To add a graphic effect, you'll only need to use CSS animations, but you won't have any other possibilities that respect FluentUI rendering. V

[shark0151]

That's a lot of gymnastics needed to add a feature slightly outside of the Fluent Design :) .
From what I can tell both the dismiss button and the overlay click call public async Task CancelAsync<T>(T returnValue) => await CloseAsync(DialogResult.Cancel(returnValue));. Which then goes to CloseAsync(DialogResult dialogResult) and then the only way to prevent it from closing at that point is with this condition check if (Instance.Parameters.ValidateDialogAsync != null && !dialogResult.Cancelled), as it is the only branch that early returns before executing the dismiss logic. But that can't be prevented because it was cancelled so it skips that.
So then yes, I can do my own logic in the submit/cancel button and just not call the close until after checking, that was never the issue. And I guess override the header, even though I would prefer not to copy-paste the default header just to override a function. That still leaves the overlay click. I guess with some Javascript you could do that but that feels dirty.
I understand you have a design that you have to adhere to and overall I quite like it, but the moment I have to do something a bit more extra it feels very restricted.

Anyway, thanks for replying. If I ever succeed in my goal I shall update this conversation