The OnClose event fires multiple times when the handler uses the DialogFactory.
The behavior occurs with all select components (AutoComplete, ComboBox, DropDownList, MultiColumnComboBox, MultiSelect)
Possible workarounds include:
Here is a test page that reproduces the issue:
<div style="display: flex; gap: 2em;">
<div>
<TelerikButtonGroup SelectionMode="@ButtonGroupSelectionMode.Single">
<ButtonGroupToggleButton @bind-Selected="@UseOnChange">Use OnChange</ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@UseOnClose">Use OnClose</ButtonGroupToggleButton>
</TelerikButtonGroup>
<TelerikDropDownList Data="@Data"
@bind-Value="@Value"
ValueField="@nameof(SampleModel.Text)"
OnChange="@OnDropDownListChange"
OnClose="@OnDropDownListClose"
Width="160px" />
</div>
<div>
<TelerikButton OnClick="@( () => CloseLog = string.Empty )">Clear Event Log</TelerikButton>
<p>
<pre>@CloseLog</pre>
</p>
</div>
</div>
@code {
private List<SampleModel> Data { get; set; } = new();
private string Value { get; set; } = string.Empty;
private List<string> Values { get; set; } = new();
private string CloseLog { get; set; } = string.Empty;
private bool UseOnClose { get; set; } = true;
private bool UseOnChange { get; set; }
[CascadingParameter]
public DialogFactory? TelerikDialogs { get; set; }
private async Task OnDropDownListChange(object currentValue)
{
CloseLog += $"OnChange {DateTime.Now.ToString("HH:mm:ss.fff")} \n";
if (UseOnChange)
{
await TelerikDialogs!.AlertAsync("OnChange");
}
}
private async Task OnDropDownListClose(DropDownListCloseEventArgs args)
{
CloseLog += $"OnClose {DateTime.Now.ToString("HH:mm:ss.fff")} \n";
if (UseOnClose)
{
await TelerikDialogs!.AlertAsync("OnClose");
}
}
public class SampleModel
{
public int Id { get; set; }
public string Text { get; set; } = string.Empty;
}
}