Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

MudTextField - Using ***InputType="InputType.Number"*** and ***MaxLength="6"*** does not prevent the entry of too many characters #9359

Open
1 of 2 tasks
Proktologe opened this issue Jul 9, 2024 · 2 comments
Open
1 of 2 tasks

MudTextField - Using ***InputType="InputType.Number"*** and ***MaxLength="6"*** does not prevent the entry of too many characters #9359

Proktologe opened this issue Jul 9, 2024 · 2 comments

Comments

@Proktologe
Copy link

Proktologe commented Jul 9, 2024 •
edited
Loading

Bug type

Component

Component name

MudTextField

What happened?

if you set "InputType="InputType.Number" and the MaxLength="6" wont working. I think this is undesirable behavior, at least I think so.

Expected behavior

Regardless of the InputType, setting MaxLength should prevent the user from entering any more characters.

Reproduction link

https://try.mudblazor.com/snippet/waQeaLODLyIMiUTB

Reproduction steps

Add the the following Component to a razor page:

<MudTextField @ref="mudTextFeldCode" T="string" Label="Insert Code" Required="true" Variant="@variantStyle_TextBoxes"
              Placeholder="put your Code here" RequiredError="needed"
              Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Lock"
              @bind-Value="entered_code" OnlyValidateIfDirty="true"
              InputType="InputType.Number" MaxLength="6"
              Validation="@(new Func<string, string>(ValidateNumericString))" />
              
              
string ValidateNumericString(string value)
{
    if (string.IsNullOrWhiteSpace(value))
    {
        return "not set!";
    }

    if (value.Length != 6)
    {
        return "to short";
    }

    if (!value.All(char.IsDigit))
    {
        return "just digits allowed";
    }

    return null;
}

Why is this Important for me:
I need a Input-Field that only shows the number-keyboard on mobile and get me a string that only contain numbers.

Relevant log output

No response

Version (bug)

6.20

Version (working)

No response

What browsers are you seeing the problem on?

Chrome

On which operating systems are you experiencing the issue?

Windows

Pull Request

  • I would like to do a Pull Request

Code of Conduct

  • I agree to follow this project's Code of Conduct
@danielchalmers
Copy link
Contributor

Appears to be a limitation with the maxlength attribute in HTML: https://stackoverflow.com/questions/8354975/how-can-i-set-max-length-in-an-html5-input-type-number-element.

Conditionally adding max to the input may work instead but wouldn't work if it's a multiline textarea:

MudBlazor/src/MudBlazor/Components/Input/MudInput.razor

Lines 57 to 81 in 84e3b88

<input class="@InputClassname"
@ref="ElementReference"
@attributes="UserAttributes"
id="@InputElementId"
type="@InputTypeString"
value="@_internalText"
@oninput="OnInput"
@onchange="OnChange"
placeholder="@Placeholder"
disabled=@GetDisabledState()
readonly="@GetReadOnlyState()"
@onblur="@OnBlurredAsync"
inputmode="@InputMode.ToDescriptionString()"
pattern="@Pattern"
@onkeydown="@InvokeKeyDownAsync"
@onkeyup="@InvokeKeyUpAsync"
maxlength="@MaxLength"
@onkeydown:preventDefault="KeyDownPreventDefault"
@onkeyup:preventDefault="@KeyUpPreventDefault"
@onmousewheel="@OnMouseWheel"
@onwheel="@OnMouseWheel"
aria-describedby="@GetAriaDescribedByString()"
aria-invalid="@Error.ToString().ToLowerInvariant()"
required="@Required"
aria-required="@Required.ToString().ToLowerInvariant()">

Are you able to use the NumericField instead?

@versile2
Copy link
Contributor

versile2 commented Jul 11, 2024 •
edited
Loading

An InputType of InputType.Number does not respect maxlength. You will have to change that and it will work. Right now it's rendering as type="number" which ignores the maxlength since it's expecting a number. That's why you can't put text into the field.

Alternatives:

  1. Remove InputType.Number, in validation just check each char for char.IsDigit
  2. Fix validation to return a length shorter and longer error
  3. Switch to NumericField
  4. Create a neat custom component that does it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@danielchalmers @Proktologe @versile2