Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

MudTextField with Multimask not update a UI if value assign programmatically

$
0
0

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.


Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>