Regarding the Blazor <InputSelect> @bind-value and @onchange event handler

[vsfeedback]

This issue has been moved from a ticket on Developer Community.

---

The Microsoft built in link between the <InputSelect> @bind-value and the @onchange event handler prevents from normally handling the event when an item in the InputSelect is selected. What is logically expected is to raise the event denoting change the of item caring with it the value of that item that can be processed in producing an understandable output from a function. The example above will tell the story in details:
<button style=“margin-left:7px;” class=“cssButtonLink1” @onclick=“SearchAcMSPath”>Search
@code {
List<TblGetAcMSearch>? lstGetAcMSearch;
private async Task SearchAcMSPath()
{
var intIdentity = new blzHMIS.HMISData.Models.AccMng.GetAcMSearch.OutputParameter<int?>();
var str5 = new blzHMIS.HMISData.Models.AccMng.GetAcMSearch.OutputParameter<string?>();
await Task.Delay(300);
lstGetAcMSearch = await GetAcMSearchProc.AccMngSPAsync(“GetAcMBySearch”, null, null, null, null, null, null, null, null, strSearch, null, null, null, null, null, str5, intIdentity);
}
}
Identity type:
@* <select value=“@intABIDf” style=“width:500px;” @onchange=“async(e)=>{intABIDf=Convert.ToInt32(value: e.Value); await Task.Delay(500); GetReport();}”>
*@

<InputSelect @bind-Value=“intABIDf” @onclick=“GetReport” style=“width:500px;”>
@if(lstGetAcMSearch != null)
{
@foreach(var itmFound in lstGetAcMSearch)
{

@itmFound.SPath } }

As you see I’m forced to use the @onclick event handler to get the issue done. This sometimes can make conflicts in what the user sees in the UI and what he/she expects.
You may appreciate that it’s a design of the facility Accounts Master tree, it's a hierarchy represented by a TreeView at the left of the component as seen in the provided video. The TreeNodes when selected will trigger the same procedure used by the InputSelect. Now if the user selects an account form the Tree and starts to edit for example the regular credit or debit amounts and by mistak clicks the <InputSelect> this will chane the IDs used for update and sure will create problems with journal entries whether it’s a double or compound entry like processing the mounthly payroll for example. This is only one type of problems that may be met with this explained issue. Of course, to avoid this it will cost me writing a ton of validation code that can be avoided by using the right thing in the correct time.

Can you please provide a solution for this issue.

---

Original Comments

Feedback Bot on 8/19/2024, 09:35 AM:

(private comment, text removed)

Javier Calvarro Nelson [MSFT] on 8/28/2024, 01:53 PM:

(private comment, text removed)

[javiercn]

Thanks for contacting us.

Inputs require special handling to keep the state in sync. You probably need to use bind:get|set or bind:after. See https://learn.microsoft.com/en-us/aspnet/core/blazor/components/data-binding?view=aspnetcore-8.0#use-bindgetbindset-modifiers-and-avoid-event-handlers-for-two-way-data-binding for details

[dotnet-policy-service[bot]]

Hi @vsfeedback. We have added the "Needs: Author Feedback" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[dotnet-policy-service[bot]]

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. If it is closed, feel free to comment when you are able to provide the additional information and we will re-investigate.

See our Issue Management Policies for more information.