Disable Form Submit when pressing Enter after combobox edit
Hello!
I have a Blazor combobox that is placed inside a EditForm element, like this:
<EditForm class="p-1 border bg-light" Model="SelectedSetup" OnValidSubmit="HandleValidSubmit">
<div class="control-wrapper mb-4">
<label for="lstDMS" class="form-label mb-0">Select or Enter a Run Tag/Code to Use:</label>
<SfComboBox TItem="TriggerModelDTO" TValue="string" DataSource="@Setups" PopupHeight="230px" Placeholder="Enter or Select a Run Tag or Code"
@bind-Value="@SelectedSetup.SetupName" AllowCustom="true">
<ComboBoxEvents TItem="TriggerModelDTO" TValue="string" ValueChange="@OnChangeSetupNameHandler"></ComboBoxEvents>
<ComboBoxFieldSettings Text="SetupName" Value="SetupName"/>
</SfComboBox>
</div>
</EditForm>
As you can see above, I want the user to be able to be able to add new values to the list but setting AllowCustom = "true". But the problem is that, after the user types in the new text, they will typically press the Enter button, which will cause the container EditForm to Submit.
How can I avoid this from happening, so that the user can press Enter after editing the combobox value without the form submit being triggered?
Many thanks!
|
<div id="wrapper">
<EditForm id="askQuestionForm" Model="@_testModel" OnValidSubmit="HandleSubmit">
<DataAnnotationsValidator />
<ValidationSummary />
<SfComboBox TValue="string" TItem="GameFields" AllowCustom="true" PopupHeight="230px" Placeholder="Select a game" @bind-Value="_testModel.Value" DataSource="@Games">
<ComboBoxFieldSettings Text="Text" Value="ID" />
</SfComboBox>
<button type="submit">Submit</button>
</EditForm>
</div>
@code {
private Test _testModel = new Test();
private void HandleSubmit()
{
Console.WriteLine("Submit...");
}
protected override void OnAfterRender(bool firstRender)
{
if (firstRender)
{
JS.InvokeVoidAsync("PreventEnterKey", "askQuestionForm");
}
}
public class Test
{
[Required]
public string Value { get; set; }
}
...
} |
|
window.PreventEnterKey = (id) => {
var formObj = document.getElementById(id);
formObj.addEventListener('keydown', function (event) {
if (event.keyCode == 13) {
event.preventDefault();
return false;
}
})
}; |
Many thanks Ponmani for your kind response. The sample project showed me how to solve the problem. Thanks again.
- 3 Replies
- 2 Participants
-
FR Fritz
- Feb 28, 2022 06:51 AM UTC
- Mar 14, 2022 04:56 AM UTC
