ColorPicker opens and immediately closes #858

New Issue

claunia · 2026-01-29T17:45:25Z

claunia commented

2026-01-29 17:45:25 +00:00

Originally created by @OndrejUzovic on GitHub (May 29, 2023).

It seems there is a kind of race-condition in the toggle functionality of Popup which is used inside the ColorPicker.

The Popup implements this OnAfterRedrawAsync method:

protected override async Task OnAfterRenderAsync(bool firstRender)
{
	if (!firstRender)
	{
		if (shouldToggle)
		{
			await JSRuntime.InvokeVoidAsync("Radzen.togglePopup", target, GetId(), false, Reference, nameof(OnClose));
		}

		shouldToggle = false;
	}
}

Please notice, the flag shouldToggle = false; is set after the await JSRuntime.InvokeVoidAsync.

What is in some cases happening is that during that awaiting another rendering is triggered causing that another OnAfterRenderAsync is called before the first awaiting is completed. It causes the second await JSRuntime.InvokeVoidAsync is called.

This second call of JSRuntime.InvokeVoidAsync then closes the popup. (The effect is that the popup opens and after few milliseconds closes.)

Unfortunately I cannot provide a simple source code to reproduce the issue. It always happens in my code but I could not find a simple code which would trigger the second redraw during JSRuntime.InvokeVoidAsync.

The solution could be to move shouldToggle = false; before the await JSRuntime.InvokeVoidAsync. So that if a subsequent render happens the await JSRuntime.InvokeVoidAsync is not called.

Originally created by @OndrejUzovic on GitHub (May 29, 2023). It seems there is a kind of race-condition in the toggle functionality of Popup which is used inside the ColorPicker. The Popup implements this `OnAfterRedrawAsync` method: ``` protected override async Task OnAfterRenderAsync(bool firstRender) { if (!firstRender) { if (shouldToggle) { await JSRuntime.InvokeVoidAsync("Radzen.togglePopup", target, GetId(), false, Reference, nameof(OnClose)); } shouldToggle = false; } } ``` Please notice, the flag `shouldToggle = false;` is set after the `await JSRuntime.InvokeVoidAsync`. What is in some cases happening is that during that awaiting another rendering is triggered causing that another OnAfterRenderAsync is called before the first awaiting is completed. It causes the second `await JSRuntime.InvokeVoidAsync` is called. This second call of `JSRuntime.InvokeVoidAsync` then closes the popup. (The effect is that the popup opens and after few milliseconds closes.) Unfortunately I cannot provide a simple source code to reproduce the issue. It always happens in my code but I could not find a simple code which would trigger the second redraw during `JSRuntime.InvokeVoidAsync`. The solution could be to move `shouldToggle = false;` before the `await JSRuntime.InvokeVoidAsync`. So that if a subsequent render happens the `await JSRuntime.InvokeVoidAsync` is not called.

claunia closed this issue

2026-01-29 17:45:25 +00:00

claunia commented

2026-01-29 17:45:25 +00:00

@akorchev commented on GitHub (May 30, 2023):

Feel free to open a pull request.

@akorchev commented on GitHub (May 30, 2023): Feel free to open a pull request.

claunia referenced this issue

2026-01-29 18:18:27 +00:00

[PR #858] [MERGED] Change RadzenComponent.Element setter to protected internal #2355

claunia referenced this issue

2026-01-29 18:18:28 +00:00