|
@inject IJSRuntime JS
<SfMultiSelect TValue="string[]" TItem="Countries" Placeholder="e.g. Australia" DataSource="@Country">
<MultiSelectFieldSettings Text="Name" Value="Code"></MultiSelectFieldSettings>
<MultiSelectEvents TValue="string[]" TItem="Countries" Opened="OpenEvent" OnClose="PopupClose"></MultiSelectEvents>
<MultiSelectTemplates TItem="Countries">
<HeaderTemplate>
<div>
<input id="customInput" @onfocusin="CuastomInputFocus"/>
@*<InputText id="customInput" @onfocusin="@CuastomInputFocus" @bind-Value="TextIbnput"></InputText> *@
</div>
</HeaderTemplate>
</MultiSelectTemplates>
</SfMultiSelect>
@code {
public string TextIbnput { get;set; }
public Boolean isFocus { get; set; } = false;
void CuastomInputFocus()
{
isFocus = true;
}
void PopupClose(PopupEventArgs args)
{
if (isFocus)
{
args.Cancel = true;
isFocus = false;
} else
{
args.Cancel = false;
}
}
protected async Task OpenEvent(Syncfusion.Blazor.DropDowns.PopupEventArgs args)
{
await JS.InvokeAsync<string>("Focus", "customInput");
}
public class Countries
{
public string Name { get; set; }
public string Code { get; set; }
}
List<Countries> Country = new List<Countries>
{
new Countries() { Name = "Australia", Code = "AU" },
new Countries() { Name = "Bermuda", Code = "BM" },
new Countries() { Name = "Canada", Code = "CA" },
new Countries() { Name = "Cameroon", Code = "CM" },
new Countries() { Name = "Denmark", Code = "DK" }
};
} | 
