MudBlazor TextField with Regex mask and text handling-CodePudding

I am new to MudBlazor and I'm trying to create a feature to add tags to a post using MudBlazor components. I have a form with a TextField and a ChipSet.

I want the TextField to use a mask to only allow valid characters in the input box. I can create a regular expression for this pretty easily. For example, only alphanumeric characters and spaces.

When the tag is complete, I want to hit enter to validate and add it to the ChipSet. I was using OnKeyUp for this, as well as automatically making the text lowercase (might be better for OnKeyDown?).

In the future, autocomplete support would be good, but users can create new tags as well, so I would need them to be able to do that.

Right now my code is

    <MudTextField T="string" Label="Tags" Required="false" Mask="@tagMask" @bind-Value="tagInput" Immediate="true" OnKeyUp="HandleTagsOnKeyUp" TextUpdateSuppression="false"/>
    <MudChipSet AllClosable="true" OnClose="RemoveTag">
    @foreach (var tag in tags)
    {
        <MudChip Text="@tag"></MudChip>
    }
    </MudChipSet>

    List<string> tags = new List<string>();
    string tagInput = "";

    public void AddTag(string tag) => tags.Add(tag);
    public void RemoveTag(MudChip chip) => tags.Remove(chip.Text);

    public IMask tagMask = new RegexMask(@"[A-z0-9 \n]*");

    async void HandleTagsOnKeyUp(KeyboardEventArgs args) 
    {
        if (args.Key == "Enter") 
        {
            var trimmedInput = tagInput.Trim().ToLower();
            //await Task.Delay(100);
            if (trimmedInput.Length > 0 && !tags.Contains(trimmedInput))
                AddTag(trimmedInput);

            tagInput = "";
            StateHasChanged();
        }
    }

But it seems like the mask works and the ChipSet entry and field clearing (mostly) work individually, but together, they both break. Also, it seems like there is an issue with fast typing just missing/deleting characters.

Any suggestions? Am I going about this the correct way?

CodePudding user response：

In the future, autocomplete support would be good, but users can create new tags as well, so I would need them to be able to do that.

Since you want to use autocomplete to search for your tags as mentioned in you question and also be able to create new tags in future with regex masking, I created an example where both are present. Hopefully, it is what you were looking for.

Demo: