search

microsoft / fluentui-blazor

Microsoft Fluent UI Blazor components library. For use with ASP.NET Core Blazor applications
https://www.fluentui-blazor.net
MIT License
3.83k stars 371 forks source link

fix: Record objects cause FluentDialog to reset when overlay is clicked #2806

Open Ap73MKa opened 3 weeks ago

Ap73MKa commented 3 weeks ago

🐛 Bug Report

In Fluent UI Blazor from version 4.9.0, when using a record type object and setting the PreventDismissOnOverlayClick parameter for the FluentDialog component, the dialog is destroyed and recreated when any property of the object is modified, and the overlay is clicked. This issue does not occur in earlier versions or when using a class type object.

💻 Repro or Code Sample

Reproduce

Steps to reproduce the issue:

  1. Use Fluent UI Blazor version from 4.9.0 to 4.10.2
  2. Create a FluentDialog component, passing an object of type record
  3. Set the dialog's PreventDismissOnOverlayClick parameter to true
  4. Open the dialog, modify any property of the record, and click on the overlay outside the dialog

Clone repo

https://github.com/Ap73MKa/fluent-dialog-issue

🤔 Expected Behavior

The dialog should remain open and continue to function without any issue, preserving the updated record object state when interacting with the overlay.

😯 Current Behavior

When any property of the record object is modified, and the overlay is clicked, the dialog component is destroyed and recreated. This causes the dialog to reset, losing any changes to the record object.

💁 Possible Solution

One potential solution is to revert to a previous version of Fluent UI Blazor (before 4.9.0) where this issue is not present. Alternatively, using a class instead of a record for the object passed to the dialog avoids the bug.

🔦 Context

This bug occurred when I was working on a multi-step form on Blazor hybrid for Android. When the user exits input, he may accidentally click on Overlay (that's why PreventDismissOnOverlayClick was installed) and because of this bug, he was transferred to the first stage of the form.

🌍 Your Environment

vnbaaij commented 1 week ago

Hi,

Can you explain what you mean with "dialog component is destroyed and recreated. This causes the dialog to reset, losing any changes to the record object". When running you repo code, I see this when using a record for TestObject, changing the value and then clicking on the overlay: Image

So the dispose is called but the dialog remains on screen tand the changed value is still shown. This is on Blazor Server.

We are using a GetHashCode() in our code. The value of this will change when using a record and a value of a property in that record is changed. Don't think there is anything we can do about that.

vnbaaij commented 1 week ago

Adding the following code to the TestObject record:

 public override int GetHashCode()
 {
     return base.GetHashCode();
 }

prevents the 'Dispose called' toast from being displayed when clicking on the overlay after changing the value. Please confirm that this resolves your issue as well.