MudTextField: Check if user is trying to enter negative number #11074

Lewis-Pitman · 2025-03-21T17:35:42Z

Description

Check if user is trying to enter negative number. If they are, modify the text so that it allows them to do so.
This seems like a hacky fix. May need guidance on an alternative fix
For issue #11055

How Has This Been Tested?

Visually

Type 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)
Documentation (fix or improvement to the website or code docs)

Before:
https://github.com/user-attachments/assets/be2f42db-a9c4-4f5d-93bd-d68fb7f18289

After:
https://github.com/user-attachments/assets/21621dd6-ba74-4e99-b4f8-c2b0056671c1

Checklist

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

Check if user is trying to enter negative number. If they are, modify the text so that it allows them to do so.

Lewis-Pitman · 2025-03-21T17:37:38Z

I am unsure whether this is the best way to go about fixing this. I posted some more information in a comment in #11055

Lewis-Pitman · 2025-03-23T21:13:34Z

This is a change in MudTextField.razor.cs that gives the desired effect. I have not yet implemented this for MudNumericField. Does this look better? @vernou

Nickztar · 2025-03-24T12:01:38Z

Would probably have to check for more types of Value, or maybe it would be possible to check if Value is INumber

vernou · 2025-03-24T22:43:39Z

@Lewis-Pitman, don't hesitate to commit and push. It's more pleasant to review instead of image.

Consider to check T instead of Value.

Allow the user to type negative numbers correctly if bound to a numeric type

codecov · 2025-03-25T19:00:42Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 90.98%. Comparing base (68a2118) to head (325d7a4).
Report is 12 commits behind head on dev.

Additional details and impacted files

@@            Coverage Diff             @@
##              dev   #11074      +/-   ##
==========================================
- Coverage   91.05%   90.98%   -0.08%     
==========================================
  Files         429      431       +2     
  Lines       13965    14062      +97     
  Branches     2698     2732      +34     
==========================================
+ Hits        12716    12794      +78     
- Misses        646      651       +5     
- Partials      603      617      +14

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Lewis-Pitman · 2025-03-25T19:03:21Z

This code makes MudTextField work as expected. Checking if the value was INumber did not work. Happy to implement tests if this method is accepted.

As for MudNumericField, I have been debugging the issue for hours with no luck. I think modifying MudBaseInput may be necessary to get it to work. Using SetTextAsync on MudNumericField doesn't change anything. I even tried intercepting the - key inside HandleKeyDownAsync but had no luck getting the desired outcome. I am unsure what to do here

Lewis-Pitman · 2025-03-25T19:11:48Z

As for MudNumericField, I have been debugging the issue for hours with no luck.

Seems like there is a seperate issue #11035 for MudNumericField specifically. Since the solution seems to be a bit more complex, it might be better for me to leave it for now and someone else can try this?

Lewis-Pitman · 2025-03-25T21:10:46Z

Also just noticed that I'll need to add nullable types too like int? And float? For example

vernou · 2025-03-26T10:55:11Z

MudNumericField use the tag HTML <input type="number">, so it's the browser that valid the input. You can ignore it. I try to fix it in #11035.

- MudTextField allows a negative number to be entered on the first attempt when bound to a numeric type - Added test to check this works - Reverted MudBaseInput changes

src/MudBlazor.UnitTests/Components/TextFieldTests.cs

+                .Add(p => p.Immediate, true)
+                .Add(p => p.Value, 5));
+
+            comp.Find("input").Input("0-");


src/MudBlazor.UnitTests/Components/TextFieldTests.cs

+            comp.Find("input").Input("0-");
+
+            comp.Instance.Text.Should().Be("-");
+            comp.Instance.Text.Should().NotBe("0");


Reverted MudBaseInput to what it was before. This was not properly reverted before, causing a test to run infinitely Improved the test by checking if entering nothing changes the value of 5 to 0.

Lewis-Pitman · 2025-03-27T21:05:31Z

I realised that I hadn't reverted MudBaseInput properly after the initial changes I made to it, which caused one of the checks to fail. I have now properly reverted the code to how it was before and this has been fixed.

As for the test, entering "" causes comp.Instance.Text.Should().Be("0"); to fail, although comp.Instance.Value.Should().Be(0); does pass meaning it changed the value from 5 to 0 when entering nothing. I removed the text check, but please let me know if I should add it back in.

vernou · 2025-03-28T07:40:04Z

It's important to check Text and Value for each step. Can you reput it? Just adapt the expected.

src/MudBlazor.UnitTests/Components/TextFieldTests.cs

+                .Add(p => p.Value, 5));
+
+            comp.Find("input").Input("");
+            comp.Find("input").Blur();


Remove blur from test

src/MudBlazor.UnitTests/Components/TextFieldTests.cs

+            comp.Find("input").Input("5");
+            comp.Find("input").Input("0-");
+            comp.Instance.Text.Should().Be("-");
+            comp.Instance.Value.Should().Be(5);


Added test to check entering a negative number

sonarqubecloud · 2025-03-31T20:42:57Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

Check if user is trying to enter negative number

3f708da

Check if user is trying to enter negative number. If they are, modify the text so that it allows them to do so.

github-actions bot added bug Something does not work as intended/expected PR: needs review labels Mar 21, 2025

Lewis-Pitman changed the title ~~Check if user is trying to enter negative number~~ MudTextField: Check if user is trying to enter negative number Mar 21, 2025

This comment was marked as resolved.

Sign in to view

MudTextField allow negative input if numeric

ef37e9b

Allow the user to type negative numbers correctly if bound to a numeric type

Anu6is requested a review from ScarletKuro March 26, 2025 09:16

MudTextField: Negative number on first attempt

c11f89f

- MudTextField allows a negative number to be entered on the first attempt when bound to a numeric type - Added test to check this works - Reverted MudBaseInput changes

vernou suggested changes Mar 27, 2025

View reviewed changes

Revert MudBaseInput and improve test

a9d1a1a

Reverted MudBaseInput to what it was before. This was not properly reverted before, causing a test to run infinitely Improved the test by checking if entering nothing changes the value of 5 to 0.

TextFieldTests negative number improvement

88b4ebe

vernou reviewed Mar 29, 2025

View reviewed changes

src/MudBlazor.UnitTests/Components/TextFieldTests.cs Outdated

.Add(p => p.Value, 5));

comp.Find("input").Input("");

comp.Find("input").Blur();

This comment was marked as resolved.

Sign in to view

Remove blur from test

325d7a4

Remove blur from test

vernou reviewed Mar 30, 2025

View reviewed changes

src/MudBlazor.UnitTests/Components/TextFieldTests.cs

comp.Find("input").Input("5");

comp.Find("input").Input("0-");

comp.Instance.Text.Should().Be("-");

comp.Instance.Value.Should().Be(5);

This comment was marked as resolved.

Sign in to view

Test full scenario

f69b0aa

Added test to check entering a negative number

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

MudTextField: Check if user is trying to enter negative number #11074

MudTextField: Check if user is trying to enter negative number #11074

Lewis-Pitman commented Mar 21, 2025 •

edited

Loading

Lewis-Pitman commented Mar 21, 2025

This comment was marked as resolved.

Lewis-Pitman commented Mar 23, 2025

Nickztar commented Mar 24, 2025

vernou commented Mar 24, 2025 •

edited

Loading

codecov bot commented Mar 25, 2025 •

edited

Loading

Lewis-Pitman commented Mar 25, 2025

Lewis-Pitman commented Mar 25, 2025

Lewis-Pitman commented Mar 25, 2025 •

edited

Loading

vernou commented Mar 26, 2025

This comment was marked as resolved.

This comment was marked as resolved.

Lewis-Pitman commented Mar 27, 2025

vernou commented Mar 28, 2025

This comment was marked as resolved.

This comment was marked as resolved.

sonarqubecloud bot commented Mar 31, 2025

MudTextField: Check if user is trying to enter negative number #11074

Are you sure you want to change the base?

MudTextField: Check if user is trying to enter negative number #11074

Conversation

Lewis-Pitman commented Mar 21, 2025 • edited Loading

Description

How Has This Been Tested?

Type of Changes

Checklist

Lewis-Pitman commented Mar 21, 2025

This comment was marked as resolved.

Lewis-Pitman commented Mar 23, 2025

Nickztar commented Mar 24, 2025

vernou commented Mar 24, 2025 • edited Loading

codecov bot commented Mar 25, 2025 • edited Loading

Codecov Report

Lewis-Pitman commented Mar 25, 2025

Lewis-Pitman commented Mar 25, 2025

Lewis-Pitman commented Mar 25, 2025 • edited Loading

vernou commented Mar 26, 2025

This comment was marked as resolved.

This comment was marked as resolved.

Lewis-Pitman commented Mar 27, 2025

vernou commented Mar 28, 2025

This comment was marked as resolved.

This comment was marked as resolved.

sonarqubecloud bot commented Mar 31, 2025

Quality Gate passed

Lewis-Pitman commented Mar 21, 2025 •

edited

Loading

vernou commented Mar 24, 2025 •

edited

Loading

codecov bot commented Mar 25, 2025 •

edited

Loading

Lewis-Pitman commented Mar 25, 2025 •

edited

Loading