Im using this Select2 plugin in dropdown at my partial view. The textbox is coming on the dropdown but i couldnt type anything inside that textbox. I need an asssist here.

<link href="~/Content/Multiselect/select2.min.css" rel="stylesheet" />

<!-- Select2 JS -->
<script src="~/Content/Multiselect/select2.min.js"></script>

<script>
    $(".searchfilter").select2();
</script>

<span class="input-group-addon p-0 cust-addon">
    @Html.DropDownListFor(model => model.DialCode, (SelectList)ViewBag.DialCodeList, "Please Select", new { @class = " form-control requiredfield searchfilter Select2-fixed-width", @style = "width: 95px;" })
</span>

<style>
    .input-group .form-control {
        height: 34px; /* Match height */
        border-radius: 0; /* Consistent edges */
    }

    .input-group-addon .form-control {
        height: 34px; /* Match the input height */
        border-radius: 0; /* Consistent edges */
    }

    .cust-addon {
        padding: 0px !important;
    }

    .Select2-fixed-width + .select2-container {
        display: block !important; /* Ensure it is displayed correctly */
        width: 120px !important;
        font-size: 12px !important; /* Adjust the font size as needed */
    }
</style>

This is a snippet where the assets are bound to a public cdn showing a working scenario. I still cannot understand what's going wrong in my real case. I was suggested to strip off any other javascript that might be interfering with the event loop or maybe some sync function invocations that might be blocking the UI. Still clueless.

.input-group .form-control {
  height: 34px;  
  border-radius: 0;  
}

.input-group-addon .form-control {
  height: 34px;  
  border-radius: 0;  
}

.cust-addon {
  padding: 0px !important;
}

.Select2-fixed-width+.select2-container {
  display: block !important;  
  width: 200px !important;
  font-size: 12px !important;  
}

<!-- added jQuery -->
<script src=".7.1/jquery.min.js"></script>

<link rel="stylesheet" href=".0.13/css/select2.min.css" />
<script src=".0.13/js/select2.min.js"></script>

<script>
 //initialize the select2 dropdown once the document is ready
 //this was added compared to the original scenario,
 //but yet the dropdown was correctly initialized so maybe it doesn't make any difference
 $(document).ready(function() {
    $(".searchfilter").select2();
 });
</script>

<!-- I expanded your code to mimic real rendered html -->
<span class="input-group-addon p-0 cust-addon">
  <!--
  @Html.DropDownListFor(
    model => model.DialCode,
    (SelectList)ViewBag.DialCodeList,
    "Please Select",
    new {
      @class = " form-control requiredfield searchfilter Select2-fixed-width",
      @style = "width: 95px;"
    }
  )
  -->
  <select class="form-control requiredfield searchfilter Select2-fixed-width" style="width: 95px;">
      <option value="">Please Select</option>
      <option value="+1">+1 (United States)</option>
      <option value="+44">+44 (United Kingdom)</option>
      <option value="+91">+91 (India)</option>
      <option value="+33">+33 (France)</option>
      <option value="+49">+49 (Germany)</option>
  </select>
</span>