#Html.DropDownListFor is showing a textbox before loaded - razor

Question

I have some problems with a multiple dropdownlist, while loading its showing a textbox and them it load the dropdownlist control:
this is the code in the View:
#Html.DropDownListFor(m => #m.SelectedInfractionsId,
new MultiSelectList(Model.InfractionList, "Value", "Text", #Model.SelectedInfractionsId),
new {
id = "SelectedInfractionsId",
#class = "form-control multiselect-dropdown",
multiple = "true",
data_placeholder = "Select Users"
})
This is the code in the Controller:
List<SelectListItem> Listofinfractions = new List<SelectListItem>();
var infractions = _context.InfractionsCategories.OrderByDescending(x => x.Id == 1);
foreach (var infraction in infractions)
{
Listofinfractions.Add(new SelectListItem()
{
Value = infraction.Id.ToString(),
Text = infraction.Name
});
}
Listofinfractions.Insert(0, new SelectListItem()
{
Text = "----Select----",
Value = string.Empty
});
Looks like the image down below:
DropDownListFor control while is loading
once is loaded the control looks like :
DropDownListFor control when is loaded