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 core 3.0.1

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 core 3.0.1

• javascript
• asp-core
• blazor
• blazor-server-side

• What is chosen-select? I only have heard of it as a jquery plugin. Which would mean you have 2 things (blazor and jquery) manipulating the <SELECT> in DOM at the same time and peting. Which is not a good idea. – David Masterson Commented Nov 9, 2019 at 13:11
• Chosen is a library that adds search capabilities to drop down by adding an extra div. Now I know that when you change value in chosen it does not change in actual drop down but it is too mon and we are so used to it that mostly every one needs it. – abdul qayyum Commented Nov 9, 2019 at 13:14
• harvesthq.github.io/chosen – abdul qayyum Commented Nov 9, 2019 at 13:15
• 2 My point was that you have 2 frameworks trying to manage the DOM at the same time. Which WILL cause problems. It is easy to create a Blazor ponent with similar search functionality and then use that in your Blazor projects where it is needed. – David Masterson Commented Nov 9, 2019 at 13:20
• 1 You say, about js changes, _ but i can not access that_, and yes, you can access that via JS Interop. – dani herrera Commented Nov 9, 2019 at 19:06

2 Answers 2

<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>

I have the same problem. My temp fix is using IJSRuntime for manual binding value for this type ponent 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);
          }
      }