How to create a InputText Component - razor

Question

I'm trying to create a Input component that can:
Clear its value when press Escape.
On mousewheel change its value.
I'm creating a Input component cause i dont wanna put the same code in all Inputs elements and i need to administrate all from the same site. I have 6 days with dis issue. I'm reading and searching information that i could use but nothing help me at 100%.
#inherits Microsoft.AspNetCore.Components.Forms.InputBase<string>
#using Microsoft.AspNetCore.Components.Forms
#if (ReadOnly)
{
<InputText type="text"
tabindex="#TabIndex"
class="#Class"
id="#Id"
style="#Style"
maxlength="#MaxLength"
min="#Min"
max="#Max"
placeholder="#Placeholder"
readonly />
}
else
{
<InputText type="text"
maxlength="#MaxLength"
min="#Min"
max="#Max"
class="#Class"
tabindex="#TabIndex"
id="#Id"
style="#Style"
placeholder="#Placeholder"
#attributes="#AdditionalAttributes"
#bind-Value="#Value"
#bind-Value:event="oninput"
#onkeydown="#(e => { if (e.Code == "Escape") Value = Clear(); StateHasChanged(); })"
#onmousewheel="CaptureScroll"
/>
}
#code{
[Parameter]
public string Type { get; set; }
[Parameter]
public string Class { get; set; }
[Parameter]
public string Placeholder { get; set; }
[Parameter]
public string Id { get; set; }
[Parameter]
public string Style { get; set; }
[Parameter]
public bool ReadOnly { get; set; }
[Parameter]
public int MaxLength { get; set; }
[Parameter]
public int Min { get; set; }
[Parameter]
public int Max { get; set; }
[Parameter]
public int TabIndex { get; set; }
}
When i need to use it i just call it:
<HyperInput Type="text" Class="form-control" Id="inputName" TabIndex="1" #bind-Value="model.ModelName" />.
When i run the application trying to make this work i have this error:
Error: System.InvalidOperationException: Shared_Components.Forms.HyperInput requires a cascading parameter of type EditContext. For example, you can use Shared_Components.Forms.HyperInput inside an EditForm.
at Microsoft.AspNetCore.Components.Forms.InputBase1.SetParametersAsync(ParameterView parameters) at Microsoft.AspNetCore.Components.Rendering.ComponentState.SetDirectParameters(ParameterView parameters) at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewComponentFrame(DiffContext& diffContext, Int32 frameIndex) at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewSubtree(DiffContext& diffContext, Int32 frameIndex) at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InsertNewFrame(DiffContext& diffContext, Int32 newFrameIndex) at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForRange(DiffContext& diffContext, Int32 oldStartIndex, Int32 oldEndIndexExcl, Int32 newStartIndex, Int32 newEndIndexExcl) at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.ComputeDiff(Renderer renderer, RenderBatchBuilder batchBuilder, Int32 componentId, ArrayRange1 oldTree, ArrayRange`1 newTree)
at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderInExistingBatch(RenderQueueEntry renderQueueEntry)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()
I tried wrap HyperInput with a EditForm and not work.
I wish that someone could help me, i need it.
EDIT:
Now, i'm trying with a input element instead InputText and without inherit InputBase. I only added:
private string _binder;
[Parameter]
public string Binder
{
get => _binder;
set => Set(value);
}
[ParameterAttribute] public EventCallback<string> BinderChanged { get; set; }
public async void Set(string value)
{
_binder = value;
await BinderChanged.InvokeAsync(value);
}
The only thing that i can do with this component is delete with Backspace.
NOTE: Instead of use #bind-Value i'm using #bind-Binder.

Answer 1

You can use classic DOM events, like onkeyup and onmousewheel to make your HyperInput work in your favor. I'd strongly recommend to inherent from InputText since it makes your component much more powerful. The version I post here should you get started. It is far away from being completed.
Usage by other components
To show the usage within an EditContext and the two-way binding capabilities, I created a simple model, a display element, and a reset button
<EditForm Model="_model">
<HyperInput #bind-Value="_model.Name" Options="#(new String[]{ "ABC", "DEF","TEST","SOMETHING"})" class="form-control" />
</EditForm>
<span>#_model.Name</span>\
<button #onclick="#(() => _model.Name = "My Testname")" >Reset</button>
#code
{
public class TestModel
{
public String Name { get; set; } = "My test name";
}
private TestModel _model = new TestModel();
}
HyperInput
#inherits InputText
<input type="text" #bind-value="Value" #onkeyup="ClearInput" #onmousewheel="OnMouseWheelUp" #attributes=AdditionalAttributes />
#code {
[Parameter]
public IReadOnlyList<String> Options { get; set; }
private Int32 _index = 0;
public void ClearInput(KeyboardEventArgs args)
{
if(args.Key == "Escape")
{
//CurrentValue triggers the update process
base.CurrentValue = String.Empty;
}
}
public void OnMouseWheelUp(WheelEventArgs args)
{
Int32 nextIndex;
if(args.DeltaY > 0)
{
nextIndex = _index + 1;
}
else
{
nextIndex = _index - 1;
}
SuggestInput(nextIndex);
}
private void SuggestInput(Int32 requestedIndex)
{
if(Options == null || Options.Count == 0) { return; }
if(requestedIndex < 0 && Options.Count > 0)
{
_index = 0;
CurrentValue = Options[0];
}
else if(requestedIndex < Options.Count)
{
_index = requestedIndex;
CurrentValue = Options[requestedIndex];
}
}
}
If the escape button is pressed, CurrentValue is set to an empty string and the text box is empty. CurrentValue will trigger the update process. For the mouse wheel, there is a list of options represented by the parameter Options and a local field responsible for remembering the current position in the list.
The WheelEventArgs has a property DeltaY. If you scroll up, this value is negative. If you scroll down, the value is positive.
I make a simple "limiter" logic. If you reach the boundaries of the list (up or down), nothing happens anymore. But of course, you could change it to circular buffer or anything else you have a mind.