Blazor fire onchange event when Chosen drop down value changes

Question

I have following html that works but when I render drop down with Chosen it stops working. because chosen do not update actual drop down value it creates its own element that holds selected value. but i can not access that so how to trigger the onchange event then?

<select id="search" single class="chosen-select" @onchange="UpdateValue" bind="@searchValue">
        ...
</select>
...In @Code
void UpdateValue(ChangeEventArgs e)
{
    searchValue = e.Value.ToString();
    ... 
}

Now if I initialize drop down with chosen then I can not detect on change but can other wise. I am using Blazor GL - Server Side with .net core 3.0.1

Answer 1

<select @bind="productInfo.CategoryId" 
        @bind:event="oninput"
        @onchange="categoryClick"
        class="form-control">
@if (categories is null)
{
   <p><em>Loading</em></p>
}
else
{
   foreach (var item in categories)
   {
      <option value="@item.Id">@item.CategoryName</option>
   }
}
</select>

Answer 2

I have the same problem. My temp fix is using IJSRuntime for manual binding value for this type component which is rendered by 3rd js libraries (Example: select2 library). - Component.razor:

<select id="Name" class="form-control select2">
    <option @key="key">...</option>
</select>

• form.js:

  window.forms = {
  
  init: function () {
      $('.select2').select2();
  },
  selecte2BindOnChange2: function (id, dotnetHelper, nameFunc, namePro) {
  $('#' + id).on('select2:select', function (e) {
      dotnetHelper.invokeMethodAsync(nameFunc, namePro, $('#' + id).val());
  });
  

  } }

• class function:

      public async Task InitFormAsync()
      {
          await _jSRuntime.InvokeVoidAsync("forms.init");
          var properties = this.GetType().GetProperties()
              .Where(c => c.GetCustomAttributes(false)
                  .Any(ca => ca is FieldAttribute && ((FieldAttribute)ca).Type == FieldType.Combobox));
          foreach (var p in properties)
          {
              await _jSRuntime.InvokeVoidAsync("forms.selecte2BindOnChange2", p.Name, DotNetRef, "Change_" + this.GetType().Name, p.Name);
          }
      }
  
      [JSInvokable("Change_Model")]
      public void Change(string nameProperty, string value)
      {
          if (value == "null")
          {
              this.SetValue(nameProperty, null);
          }
          else
          {
              this.SetValue(nameProperty, value);
          }
      }