I'm using Blazor with MudBlazor.

I'm using the MudTextField very often and have also some validations in some places. Now i would like to create a new component which inherits from the MudTextField component.

My component should only overwrite the DebounceInterval because i want the inputs with validation to trigger it after 300ms (And i don't want to write it every time). The rest of the component should be the same.

I already managed to create a component which renders the same way as the MudTextField but i was not able to overwrite the DebounceInterval because MudBlazor is using ParameterStates (). Also for the DebounceInterval there is a state and it is not settable in an inherited class because the state itself is private.

I'm also not able to set the DebounceInterval property directly. It gets ignored because in the base class only the state is used. MudBlazor anyway says that the parameter should be only set through the state.

The only solution that i am currently seeing is that i do not inherit from MudTextField but embed it in my component which is a bad way to do such a small thing.

Here my component:

@inherits MudTextField<T>
@typeparam T

@{
    base.BuildRenderTree(__builder);
}

@code
{
    protected override void OnParametersSet()
    {
        base.OnParametersSet();
        DebounceInterval = 300;
    }
}

I'm using Blazor with MudBlazor.

I'm using the MudTextField very often and have also some validations in some places. Now i would like to create a new component which inherits from the MudTextField component.

My component should only overwrite the DebounceInterval because i want the inputs with validation to trigger it after 300ms (And i don't want to write it every time). The rest of the component should be the same.

I already managed to create a component which renders the same way as the MudTextField but i was not able to overwrite the DebounceInterval because MudBlazor is using ParameterStates (https://mudblazor/features/parameterstate#parameter-best-practices). Also for the DebounceInterval there is a state and it is not settable in an inherited class because the state itself is private.

I'm also not able to set the DebounceInterval property directly. It gets ignored because in the base class only the state is used. MudBlazor anyway says that the parameter should be only set through the state.

The only solution that i am currently seeing is that i do not inherit from MudTextField but embed it in my component which is a bad way to do such a small thing.

Here my component:

@inherits MudTextField<T>
@typeparam T

@{
    base.BuildRenderTree(__builder);
}

@code
{
    protected override void OnParametersSet()
    {
        base.OnParametersSet();
        DebounceInterval = 300;
    }
}

• razor
• blazor
• blazor-webassembly
• mudblazor

1 Answer 1

It was desgined not to be set out of the component,you may see document here

And the source codes of MudDebouncedInput :

public abstract class MudDebouncedInput<T> : MudBaseInput<T>
{
    private Timer? _timer;
    private readonly ParameterState<double> _debounceIntervalState;

    protected MudDebouncedInput()
    {
        using var registerScope = CreateRegisterScope();
        _debounceIntervalState = registerScope.RegisterParameter<double>(nameof(DebounceInterval))
            .WithParameter(() => DebounceInterval)
            .WithComparer(DoubleEpsilonEqualityComparer.Default)
            .WithChangeHandler(OnDebounceIntervalChanged);
    }

    /// <summary>
    /// The number of milliseconds to wait before updating the <see cref="MudBaseInput{T}.Text"/> value.
    /// </summary>
    [Parameter]
    [Category(CategoryTypes.FormComponent.Behavior)]
    public double DebounceInterval { get; set; }

    /// <summary>
    /// Occurs when the <see cref="DebounceInterval"/> has elapsed.
    /// </summary>
    /// <remarks>
    /// The value in <see cref="MudBaseInput{T}.Text"/> is included in this event.
    /// </remarks>
    [Parameter]
    public EventCallback<string> OnDebounceIntervalElapsed { get; set; }

    protected Task OnChange()
    {
        if (_debounceIntervalState.Value > 0 && _timer != null)
        {
            _timer.Stop();
            return base.UpdateValuePropertyAsync(false);
        }

        return Task.CompletedTask;
    }

    protected override Task UpdateTextPropertyAsync(bool updateValue)
    {
        var suppressTextUpdate = !updateValue
                                 && _debounceIntervalState.Value > 0
                                 && _timer is { Enabled: true }
                                 && (!Value?.Equals(Converter.Get(Text)) ?? false);

        return suppressTextUpdate
            ? Task.CompletedTask
            : base.UpdateTextPropertyAsync(updateValue);
    }

    protected override Task UpdateValuePropertyAsync(bool updateText)
    {
        // This method is called when Value property needs to be refreshed from the current Text property, so typically because Text property has changed.
        // We want to debounce only text-input, not a value being set, so the debouncing is only done when updateText==false (because that indicates the
        // change came from a Text setter)
        if (updateText)
        {
            // we have a change coming not from the Text setter, no debouncing is needed
            return base.UpdateValuePropertyAsync(updateText);
        }
        // if debounce interval is 0 we update immediately
        if (_debounceIntervalState.Value <= 0 || _timer == null)
            return base.UpdateValuePropertyAsync(updateText);
        // If a debounce interval is defined, we want to delay the update of Value property.
        _timer.Stop();
        // restart the timer while user is typing
        _timer.Start();
        return Task.CompletedTask;
    }

    protected override void OnParametersSet()
    {
        base.OnParametersSet();
        // if input is to be debounced, makes sense to bind the change of the text to oninput
        // so we set Immediate to true
        if (_debounceIntervalState.Value > 0)
            Immediate = true;
    }

    private void OnDebounceIntervalChanged(ParameterChangedEventArgs<double> args)
    {
        if (args.Value == 0)
        {
            // not debounced, dispose timer if any
            ClearTimer(suppressTick: false);
            return;
        }
        SetTimer();
    }

    private void SetTimer()
    {
        if (_timer == null)
        {
            _timer = new Timer();
            _timer.Elapsed += OnTimerTick;
            _timer.AutoReset = false;
        }
        _timer.Interval = _debounceIntervalState.Value;
    }

    private void OnTimerTick(object? sender, ElapsedEventArgs e)
    {
        InvokeAsync(OnTimerTickGuiThread).CatchAndLog();
    }

    private async Task OnTimerTickGuiThread()
    {
        await base.UpdateValuePropertyAsync(false);
        await OnDebounceIntervalElapsed.InvokeAsync(Text);
    }

    private void ClearTimer(bool suppressTick = false)
    {
        if (_timer == null)
            return;
        var wasEnabled = _timer.Enabled;
        _timer.Stop();
        _timer.Elapsed -= OnTimerTick;
        _timer.Dispose();
        _timer = null;
        if (wasEnabled && !suppressTick)
            OnTimerTickGuiThread().CatchAndLog();
    }

    /// <inheritdoc />
    protected override async ValueTask DisposeAsyncCore()
    {
        await base.DisposeAsyncCore();
        ClearTimer(suppressTick: true);
    }
}