Megabit / Blazorise

Blazorise is a component library built on top of Blazor with support for CSS frameworks like Bootstrap, Tailwind, Bulma, AntDesign, and Material.
https://blazorise.com/
Other
3.25k stars 526 forks source link

InputMask caret jump #4471

Open EvandroMotaSouza opened 1 year ago

EvandroMotaSouza commented 1 year ago

InputMask is also having the caret jump problem like:

(fix: TextEdit and MemoEdit caret jump #963) https://github.com/Megabit/Blazorise/pull/963

Using: Blazorise.Bootstrap5 1.1.5 Blazorise.Components 1.1.5

For a workarround i am using:

using Microsoft.AspNetCore.Components;
using System;
using System.Collections.Generic;
using System.Threading.Tasks;

namespace Blazorise;

/// <summary>
/// Format input text content when you are typing.
/// </summary>
public partial class CaretInputMask : InputMask
{

    protected override async Task OnInputHandler(ChangeEventArgs e)
    {
        var caret = await JSUtilitiesModule.GetCaret(ElementRef);
        await CurrentValueHandler(e?.Value?.ToString());

        var spaceIndex = AllIndexesOf(Mask, " ");
        if (spaceIndex.Contains(caret + 1))
            caret = caret + 2;

        await JSUtilitiesModule.SetCaret(ElementRef, caret);
    }

    public List<int> AllIndexesOf(string str, string value)
    {
        if (String.IsNullOrEmpty(value))
            return new List<int>();

        List<int> indexes = new List<int>();
        for (int index = 0; ; index += value.Length)
        {
            index = str.IndexOf(value, index);
            if (index == -1)
                return indexes;
            indexes.Add(index);
        }
    }
}
stsrki commented 1 year ago

Did you try setting the Debounce="true", or Immediate="true" on InputMask?

EvandroMotaSouza commented 1 year ago

Yes. Debounce, Immediate, Both.

My mask: <InputMask Mask="(99) 99999-9999" />

Project created with ABP Framework 7.0 --blazor (I don't think it makes a difference)

chriscsykes commented 1 year ago

I'm also having the same issue with InputMask caret jump in an ABP Framework 6.0 Blazor Server application. Setting Debounce="true and Immediate="true" doesn't work.