We’re encountering an issue with the MudTextField control when using a multimask for credit card validation. Our requirement is to have an input control that can format credit card numbers based on the card type (e.g., Visa, American Express). We have a card reader that reads and sends data to the app, and the app then identifies the credit card number and assigns it to the appropriate control. However, we’ve noticed that the credit card value is not appearing on the screen.
One thing we observed is that if we manually activate the control (by clicking inside the MudTextField) and press the space bar, the data will display correctly.
To illustrate the issue, I created a sample playground using the MudBlazor site. In this sample app, I added a button that assigns a credit card number to a model variable. When you click inside the control and press space, the value appears. However, if you only press the button, the value does not display. Removing the multimask functionality resolves the issue. – https://try.mudblazor.com/snippet/wawSYDagKbMFDGyo . I will paste code as sometime code may goes away
Can anyone help troubleshoot this problem or suggest a solution?
@using MudBlazor.Interfaces
<MudGrid Class="justify-space-between mb-3 mx-n3" Style="max-width: 800px;">
<MudItem xs="12">
<MudTextField Mask="@mask" Label="Credit Card Number" Style="max-width: 400px;"
@bind-Value="cardNumber" Variant="@Variant.Text" Clearable/>
</MudItem>
<MudItem xs="12">
Credit Card: <b>@cardNumber</b>
</MudItem>
<MudItem xs="12">
<MudButton OnClick="@((e)=> HandleClick(e))" Variant="Variant.Filled">Default</MudButton>
</MudItem>
</MudGrid>
@code {
string cardNumber, cardType;
public void HandleClick(MouseEventArgs e)
{
cardNumber = "3400 025489 52367";
}
MultiMask mask = new MultiMask("0000 0000 0000 0000",
new MaskOption("American Express", "0000 000000 00000", @"^(34|37)"),
new MaskOption("Diners Club", "0000 000000 0000", @"^(30[0-59])"),
new MaskOption("JCB", "0000 0000 0000 0000", @"^(35|2131|1800)"),
new MaskOption("VISA", "0000 0000 0000 0000", @"^4"),
new MaskOption("MasterCard", "0000 0000 0000 0000", @"^(5[1-5]|2[2-7])"),
new MaskOption("Discover", "0000 0000 0000 0000", @"^(6011|65|64[4-9])")
);
MaskOption? option = null;
MudElement element;
protected override void OnInitialized()
{
base.OnInitialized();
mask.OptionDetected += (o, input) =>
{
option = o;
cardType = o == null ? "Unknown" : o.Value.Id;
(element as IMudStateHasChanged)?.StateHasChanged();
};
}
}
We just need to display the card number that we scan and provided programmatically to our UI, appreciate is some one can help us here.
1
Your code is based on the usage of basic text fields of MudBlazor, what is different is that you are combining the MultiMask. It affects the rendering of pages and makes the field value failed to update upon passing the value.
As you can see in the test, once mask added, the automatic filling stops working.
You could munually re-render the page to make the value filled.
<MudGrid Class="justify-space-between mb-3 mx-n3" Style="max-width: 800px;">
<MudItem xs="12">
<MudTextField @ref="CreValue" Mask="@mask" Label="Credit Card Number" Style="max-width: 400px;"
@bind-Value="cardNumber" Variant="@Variant.Text" Clearable/>
</MudItem>
...
</MudGrid>
@code {
string cardNumber, cardType;
private MudTextField<string>? CreValue;
public void HandleClick(MouseEventArgs e)
{
cardNumber = "3400 025489 52367";
StateHasChanged();
CreValue?.SetText(cardNumber);
}
...
}
1