[Bug]: Enter on filter field submits form

[tacoWanneeJama]

Blazorise Version

latest

What Blazorise provider are you running on?

None

Link to minimal reproduction or a simple code snippet

When you use the [Enter] key in a search field of a DataGrid, the whole webpage is submitted and refreshed.
This only happens hen only 1 seachfield is present in the grid. When more textual searchfield are present(even hidden) this unwanted behavior is not present.

Steps to reproduce

See example: https://github.com/tacoWanneeJama/BlazorAppGridFilter/settings

What is expected?

The webpage should off course be submitted from a Blazor page.

What is actually happening?

Page refresh

What browsers do you see the problem on?

Chrome

Any additional comments?

As workaround I now add an invisible text-field.

[tesar-tech]

Your code:

<DataGrid TItem="Row" Filterable="true" Data="rows">
    <DataGridColumns>
        <DataGridNumericColumn Field="@nameof(Row.Id)" Displayable="false" />
        <DataGridColumn Field="@nameof(Row.Name)" />
    </DataGridColumns>

</DataGrid>

The issue can be extracted to:

<form>
    <input  type="text" />
</form>

here when you press Enter on the input it will always submit the form. That's standart html behavior.

The DataGrid is in form and with the filter input it does exactly that.

It's not intended behavior here.

We cannot effectively prevent that on the input itself (maybe with some weird js hack)

We can solve it by:

• placing hidden textfield as @tacoWanneeJama suggested. It works, because with 2 inputs it just doesn't do the submit. Maybe the best solution.
• Placing @onsubmit="() => {}" to the form. But that disables the submit altogether. With that we can replace it with <Div> .

That's my question for @stsrki - why is the DataGrid using Form? it seems it's not doing anything important.

[David-Moreira]

Hey,

have you tried to set this parameter to false?

[tesar-tech]

@David-Moreira It doesn't help unfortunatelly. The SubmitFormOnEnter is meant for editing rows and changing the button to be of type submit or not.

Here, the search field is used. In the simplest form of using the grid (as in my previous code block), it hits the nature of HTML, where pressing "Enter" on a single input inside a form causes a submit action.

This behavior can probably be prevented with some js, but in my opinion, the easiest solution is to add a "hidden" field inside the form, which will prevent this behavior.

"hidden" means <TextEdit Display="Display.None"/>, <input type="hidden" doesn't prevent that behavior.

btw: this bug is also "available" in blazorise docs

[David-Moreira]

The SubmitFormOnEnter is meant for editing rows and changing the button to be of type submit or not.

This is incorrect. It should do what the name implies, not what you found it does by reading the code. By changing the button to not be of type submit, the form should not get submitted on Enter.
If it's not working as the name implies, it's a bug as far as I am aware.

Here, the search field is used. In the simplest form of using the grid (as in my previous code block), it hits the nature of HTML, where pressing "Enter" on a single input inside a form causes a submit action.

It should fix exactly that, because it should only trigger the submit action if a Submit button exists as far as I know.

There must be something wrong or that we are missing if SubmitFormOnEnter set to false does not work. Even the naming implies that it should negate the Submit on enter.

[tesar-tech]

Ok, I understand the SubmitFormOnEnter should be decisive no matter the part of datagrid.

So the solution is to add this:

<Form>
@if(!SubmitFormOnEnter )
{
<TextEdit Display="Display.None"/>
}

That should make the SubmitFormOnEnter work as you suggested..

Because:

<form>
    <!-- will trigger reload on enter -->
    <input  type="text" />
</form>

<form>
    <!-- will trigger reload on enter -->
    <input  type="text" />
    <button type="button" > </button>
</form>

<form>
    <!-- WONT trigger reload on enter -->
    <input  type="text" />
    <input  type="text" />
    <button type="button" ></button>
</form>

<form>
    <!-- will trigger reload on enter -->
    <input  type="text" />
    <input  type="text" />
    <button type="submit" > </button>
</form>

If just one input is present, the button type has no effect wherever it's submitted or on. So the solution makes adds the hidden text field so it will work based on the SubmitFormOnEnter flag

[stsrki]

Does this workaround work on all browsers? I never heard that it behaves like that for a single input in a form.

[David-Moreira]

Does this workaround work on all browsers? I never heard that it behaves like that for a single input in a form.

Me neither, I was under the impression that this :

<form>
    <!-- will trigger reload on enter -->
    <input  type="text" />
</form>

Would not submit the form on enter.

Maybe the spec changed?

However, one of your examples, most likely reproduces the DataGrid SubmitFormOnEnter=false correctly, And seems to have the same html structure. There should be an existing non submit button on it, and any input inside of it will not trigger reload on enter. That's why SubmitFormOnEnter toggles between a submit and non submit hidden button.

<form>
    <!-- WONT trigger reload on enter -->
    <input  type="text" />
    <input  type="text" />
    <button type="button" ></button>
</form>

[stsrki]

Instead of adding a TextEdit, I would try to fix it by adding an additional Blazorise <Button> with a preventDefault for Form submit.

[David-Moreira]

PS: I just noticed that the key thing in your examples is that a SINGLE input makes it so a form is submitted on Enter regardless.

I think it's very very unlikely for the DataGrid form to contain only an input. So it seems that is a bug with SubmitFormOnEnter=false not handling correctly when it's just a single input, I would say we need to fix it for this specific case.