Skip to content

MudForm: Add FieldChanged event#4801

Merged
henon merged 4 commits intoMudBlazor:devfrom
Mr-Technician:form-field-changed
Jun 29, 2022
Merged

MudForm: Add FieldChanged event#4801
henon merged 4 commits intoMudBlazor:devfrom
Mr-Technician:form-field-changed

Conversation

@Mr-Technician
Copy link
Member

Description

This PR adds a FieldChanged event to the MudForm. Example usage:

<MudForm FieldChanged=@((e) => Console.WriteLine($"Value changed: {e.NewValue}. Component type: {e.Field}"))>
   <MudTextField T="string" Label="Username" Required="true" RequiredError="User name is required!"/>
</MudForm>

It will fire whenever a MudFormComponent value changes. I believe I have accounted for all components which inherit MudFormComponent.

A few caveats:

  • The Rating and Slider components do not inherit from MudFormComponent and are not covered by this PR.
  • I needed to modify IForm, which means the FieldChanged method of that interface is ignored in the Table validators which inherit IForm. However, this was already the case for the Update method.

One potential issue: MudTextFields trigger the event twice, once with a MudTextField type and once with a MudInput type.

Lastly, this seems like a niche change and I have not written proper documentation for it. However, I can do so if desired.

How Has This Been Tested?

I have written a unit test to cover the interaction with the most common fields and make sure the FieldChanged event fires correctly.

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist:

  • The PR is submitted to the correct branch (dev).
  • My code follows the code style of this project.
  • I've added relevant tests.

@codecov
Copy link

codecov bot commented Jun 28, 2022

Codecov Report

Merging #4801 (52a2105) into dev (6dbc08c) will increase coverage by 0.00%.
The diff coverage is 100.00%.

@@           Coverage Diff           @@
##              dev    #4801   +/-   ##
=======================================
  Coverage   91.41%   91.42%           
=======================================
  Files         365      365           
  Lines       12542    12553   +11     
=======================================
+ Hits        11465    11476   +11     
  Misses       1077     1077           
Impacted Files Coverage Δ
src/MudBlazor/Base/MudBaseInput.cs 92.39% <100.00%> (+0.08%) ⬆️
src/MudBlazor/Base/MudBooleanInput.cs 95.23% <100.00%> (+0.23%) ⬆️
src/MudBlazor/Base/MudFormComponent.cs 88.13% <100.00%> (+0.15%) ⬆️
...Blazor/Components/DataGrid/DataGridRowValidator.cs 72.72% <100.00%> (+2.72%) ⬆️
src/MudBlazor/Components/Form/MudForm.razor.cs 98.86% <100.00%> (+0.02%) ⬆️
src/MudBlazor/Components/Picker/MudPicker.razor.cs 100.00% <100.00%> (ø)
.../MudBlazor/Components/Radio/MudRadioGroup.razor.cs 100.00% <100.00%> (ø)
...rc/MudBlazor/Components/Table/TableRowValidator.cs 88.88% <100.00%> (+0.65%) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 6dbc08c...52a2105. Read the comment docs.

@Mr-Technician
Copy link
Member Author

@henon Is there anything you would like me to change here?

@henon
Copy link
Contributor

henon commented Jun 29, 2022

I can see how this can be useful.

The only thing I worry is that this event will cause a re-render of the whole form whenever the user changes something. It might cause unwanted effects or even slow down big forms. In general it can be dangerous for elements to cause render updates on their ancestors.

In this light, can you make sure raising this event doesn't cause form re-renders when a user doesn't add a handler for this event? It might be this way already but we better check. For instance, in a testcase you can access the RenderCount property of a TestComponent.

One potential issue: MudTextFields trigger the event twice, once with a MudTextField type and once with a MudInput type.

We have a solution for that. You can check the Standalone cascading parameter of Textfield / Input. If Standalone is false you should not fire the event. You'll notice that the Standalone cascading parameter is already used to prevent internal Inputs to do validation.

Lastly, this seems like a niche change and I have not written proper documentation for it. However, I can do so if desired.

I think a good doc string on the event is enough.

@Mr-Technician
Copy link
Member Author

In this light, can you make sure raising this event doesn't cause form re-renders when a user doesn't add a handler for this event? It might be this way already but we better check. For instance, in a testcase you can access the RenderCount property of a TestComponent.

I have confirmed no renders occur when no handler is assigned to FieldChanged.

I looked into optimizing the renders with ShouldRender as SuppressRenderingOnValidation does but haven't finalized a solution for that. Is this something that should be included, or do we not care because no renders will occur anyway if FieldChanged is unused?

We have a solution for that. You can check the Standalone cascading parameter of Textfield / Input. If Standalone is false you should not fire the event. You'll notice that the Standalone cascading parameter is already used to prevent internal Inputs to do validation.

Perfect, I have implemented this change and the double event trigger is resolved.

@henon
Copy link
Contributor

henon commented Jun 29, 2022

I looked into optimizing the renders with ShouldRender as SuppressRenderingOnValidation does but haven't finalized a solution for that. Is this something that should be included, or do we not care because no renders will occur anyway if FieldChanged is unused?

Yeah SuppressRenderingOnValidation was added exactly for the same reason because in some cases the update of the IsValid property in Form caused unwanted re-renders while the user was still typing. But I'd say we can let it be for now as this event won't be handled by most users.

@henon henon merged commit df925cb into MudBlazor:dev Jun 29, 2022
@henon henon added this to the 6.0.11 milestone Jun 29, 2022
@henon henon added enhancement Adds a new feature or enhances existing functionality (not fixing a defect) in the main library API change Modifies the public API surface labels Jun 29, 2022
@Mr-Technician Mr-Technician deleted the form-field-changed branch June 30, 2022 18:25
jammerware pushed a commit to jammerware/MudBlazor that referenced this pull request Sep 20, 2022
jammerware pushed a commit to jammerware/MudBlazor that referenced this pull request Sep 20, 2022
jammerware pushed a commit to jammerware/MudBlazor that referenced this pull request Sep 20, 2022
jammerware pushed a commit to jammerware/MudBlazor that referenced this pull request Sep 20, 2022
3dots pushed a commit to 3dots/MudBlazor that referenced this pull request Mar 23, 2023
ScarletKuro pushed a commit to ScarletKuro/MudBlazor that referenced this pull request Mar 27, 2023
ferraridavide pushed a commit to ferraridavide/MudBlazor that referenced this pull request May 30, 2023
ilovepilav pushed a commit to ilovepilav/MudBlazor that referenced this pull request Nov 25, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

API change Modifies the public API surface enhancement Adds a new feature or enhances existing functionality (not fixing a defect) in the main library

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants