RadzenTemplateForm Submit does only trigger on second click #1701

New Issue

claunia · 2026-01-29T17:57:28Z

claunia commented

2026-01-29 17:57:28 +00:00

Originally created by @Anspitzen on GitHub (Apr 2, 2025).

Describe the bug
Clicking on Submit button in a RadzenTemplateForm does not execute the Submit on click if data in form has changed but the changed FormComponent has still focus. It does work on second click as then the FormComponent (like the TextBox) has lost focus at least once.

To Reproduce
Steps to reproduce the behavior:

Go to demo pages
Replace the source with:

<RadzenTemplateForm TItem="string" Data="_nameOrTitle" Submit="LoadData">
    <RadzenFormField Text="Name or Title">
        <RadzenTextBox @bind-Value=@_nameOrTitle Placeholder="Name or Title" />
    </RadzenFormField>
    <RadzenButton ButtonType="ButtonType.Submit" Text="Submit" />
    <RadzenButton ButtonType="ButtonType.Reset" Text="Reset" Click="Reset" />
</RadzenTemplateForm>

<EventConsole @ref=@console />

@code {
    EventConsole console;
    string _nameOrTitle;

    void LoadData(string text)
    {
        console.Log($"Submit with: {text}");
    }

    void Reset()
    {
        console.Log($"Reset, now in bound variable: {_nameOrTitle}");
    }
}

Type something in the textbox
Click on the Submit button (Enter has same problem, as far as I have tested)

Expected behavior
On click on button the text from the input should be displayed in the console.

Desktop (please complete the following information):

Browser Chrome

Additional context
Submit does only work after something in the FormComponent(s) has changed from the initial nothing
After a change in the data in a FormComponent it does only work on second try
Submit without changes in the data does work instant.

Originally created by @Anspitzen on GitHub (Apr 2, 2025). **Describe the bug** Clicking on Submit button in a RadzenTemplateForm does not execute the Submit on click if data in form has changed but the changed FormComponent has still focus. It does work on second click as then the FormComponent (like the TextBox) has lost focus at least once. **To Reproduce** Steps to reproduce the behavior: 1. Go to [demo pages](https://blazor.radzen.com/templateform?theme=material3) 2. Replace the source with: ``` <RadzenTemplateForm TItem="string" Data="_nameOrTitle" Submit="LoadData"> <RadzenFormField Text="Name or Title"> <RadzenTextBox @bind-Value=@_nameOrTitle Placeholder="Name or Title" /> </RadzenFormField> <RadzenButton ButtonType="ButtonType.Submit" Text="Submit" /> <RadzenButton ButtonType="ButtonType.Reset" Text="Reset" Click="Reset" /> </RadzenTemplateForm> <EventConsole @ref=@console /> @code { EventConsole console; string _nameOrTitle; void LoadData(string text) { console.Log($"Submit with: {text}"); } void Reset() { console.Log($"Reset, now in bound variable: {_nameOrTitle}"); } } ``` 3. Type something in the textbox 4. Click on the Submit button (Enter has same problem, as far as I have tested) **Expected behavior** On click on button the text from the input should be displayed in the console. **Desktop (please complete the following information):** - Browser Chrome **Additional context** Submit does only work after something in the FormComponent(s) has changed from the initial nothing After a change in the data in a FormComponent it does only work on second try Submit without changes in the data does work instant.

claunia closed this issue

2026-01-29 17:57:28 +00:00

claunia commented

2026-01-29 17:57:28 +00:00

@akorchev commented on GitHub (Apr 2, 2025):

Hi @Anspitzen,

The same thing happens without Radzen components:

<EditForm Model="_nameOrTitle" OnSubmit=@LoadData>
    <InputText @bind-Value=@_nameOrTitle  />
    <button type="submit">Submit</button>
</EditForm>

<EventConsole @ref=@console />

@code {
    EventConsole console;
    string _nameOrTitle = "";

    void LoadData()
    {
        console.Log($"Submit with: {_nameOrTitle}");
    }

    void Reset()
    {



        console.Log($"Reset, now in bound variable: {_nameOrTitle}");
    }
}

I think the problem is related to using a string instead of a class for the model. This works as expected:

<RadzenTemplateForm TItem="MyModel" Data="model" Submit="LoadData">
    <RadzenFormField Text="Name or Title">
        <RadzenTextBox @bind-Value=@model.Name Placeholder="Name or Title" />
    </RadzenFormField>
    <RadzenButton ButtonType="ButtonType.Submit" Text="Submit" />
    <RadzenButton ButtonType="ButtonType.Reset" Text="Reset" Click="Reset" />
</RadzenTemplateForm>

<EventConsole @ref=@console />

@code {
    class MyModel
    {
        public string Name { get; set; }
    }

    EventConsole console;
    
    MyModel model = new ();

    void LoadData(MyModel data)
    {
        console.Log($"Submit with: {data.Name}");
    }

    void Reset()
    {
      
    }
}

@akorchev commented on GitHub (Apr 2, 2025): Hi @Anspitzen, The same thing happens without Radzen components: ``` <EditForm Model="_nameOrTitle" OnSubmit=@LoadData> <InputText @bind-Value=@_nameOrTitle /> <button type="submit">Submit</button> </EditForm> <EventConsole @ref=@console /> @code { EventConsole console; string _nameOrTitle = ""; void LoadData() { console.Log($"Submit with: {_nameOrTitle}"); } void Reset() { console.Log($"Reset, now in bound variable: {_nameOrTitle}"); } } ``` ![Image](https://github.com/user-attachments/assets/5eca25c7-3e53-45fd-81d7-f3367d87d2e4) I think the problem is related to using a string instead of a class for the model. This works as expected: ``` <RadzenTemplateForm TItem="MyModel" Data="model" Submit="LoadData"> <RadzenFormField Text="Name or Title"> <RadzenTextBox @bind-Value=@model.Name Placeholder="Name or Title" /> </RadzenFormField> <RadzenButton ButtonType="ButtonType.Submit" Text="Submit" /> <RadzenButton ButtonType="ButtonType.Reset" Text="Reset" Click="Reset" /> </RadzenTemplateForm> <EventConsole @ref=@console /> @code { class MyModel { public string Name { get; set; } } EventConsole console; MyModel model = new (); void LoadData(MyModel data) { console.Log($"Submit with: {data.Name}"); } void Reset() { } } ``` ![Image](https://github.com/user-attachments/assets/0dec2e1c-e072-41d4-b97b-6bcf28b48ed1)

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/radzen-blazor#1701